CODEWITHSUNDEEP
javascripthtml
Webalation
Webalation

Reputation: 255

How to keep "$" inside placeholder of input field using Bootstrap 4 and JavaScript

I would like to show a "$" placeholder always inside the input field that's for visual purposes only. How can I achieve this with JavaScript and my current setup.

<form action="#" accept-charset="UTF-8" class="needs-validation py-3" novalidate>
    <div class="input-group">
      <input type="hidden" id="date" name="date" value="" />
      <input type="hidden" id="time" name="time" value="" />
      <input
        min="5"
        type="number"
        name="amount"
        id="amount"
        placeholder="$0.00"
        class="form-control"
        required
      />
      <span class="input-group-btn">
        <button class="donate-btn btn-primary ml-3 form-group">
          DONATE
        </button>
      </span>
      <div class="invalid-feedback ml-2">
        Invalid Amount. Contributions must be at least $5.
      </div>
    </div>
</form>

Example of what I'm looking for:

enter image description here

My current solution:

enter image description here

Upvotes: 0

Views: 656

Answers (2)

Webalation
Webalation

Reputation: 255

The link posted by the user "pl2ern4" helped me solve this problem. I needed to adjust the CSS of the input typed text as well

Adding dollar prefix to bootstrap input box

Upvotes: 0

blacksheep_trident
blacksheep_trident

Reputation: 312

You can use something like this for that effect without using the placeholder to load $ sign constantly.

<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<br>
<div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text">$</div>
    </div>
    <input type="text" class="form-control" placeholder="0.00">
  </div>

Upvotes: 2

Related Questions