如何使用 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">&nbsp; &nbsp; <div class="input-group-prepend">&nbsp; &nbsp; &nbsp; <div class="input-group-text">$</div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <input type="text" class="form-control" placeholder="0.00">&nbsp; </div>

Answer 2

用户“pl2ern4”发布的链接帮助我解决了这个问题。我还需要调整输入文本的 CSS将美元前缀添加到引导程序输入框