如何使用 Bootstrap 4 和 JavaScript 将“$”保留在输入字段的占位符内

Question

我想在仅用于视觉目的的输入字段内始终显示一个“$”占位符。我如何使用 JavaScript 和我当前的设置来实现这一点。<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>我正在寻找的示例：我目前的解决方案：

Answer 1

您可以使用类似这样的东西来达到这种效果，而无需使用占位符来不断加载 $ 符号。

<!-- 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>

Answer 2

用户“pl2ern4”发布的链接帮助我解决了这个问题。我还需要调整输入文本的 CSS

将美元前缀添加到引导程序输入框