0

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

Sebastian Kaczmarek
  • 8,120
  • 4
  • 20
  • 38
Webalation
  • 237
  • 3
  • 13
  • Look at that thread: https://stackoverflow.com/questions/26324252/html-keep-placeholder-when-user-types – garzj Sep 13 '20 at 17:39
  • 1
    Does this answer your question? [Adding dollar prefix to bootstrap input box](https://stackoverflow.com/questions/21016472/adding-dollar-prefix-to-bootstrap-input-box) – pl2ern4 Sep 13 '20 at 17:49
  • I added the recommended solution and the $ ended up outside input field, so I used position relative and left position to move it inside input. However now when I type it goes over the $ instead of next to it. Any recommendations from here. – Webalation Sep 13 '20 at 17:58

2 Answers2

2

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>
blacksheep_trident
  • 172
  • 1
  • 10
0

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

Webalation
  • 237
  • 3
  • 13