亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何使用 Bootstrap 4 和 JavaScript 將“$”保留在輸入字段的占位符內

如何使用 Bootstrap 4 和 JavaScript 將“$”保留在輸入字段的占位符內

侃侃爾雅 2023-03-03 15:37:06
我想在僅用于視覺目的的輸入字段內始終顯示一個“$”占位符。我如何使用 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>我正在尋找的示例:我目前的解決方案:
查看完整描述

2 回答

?
躍然一笑

TA貢獻1826條經驗 獲得超6個贊

您可以使用類似這樣的東西來達到這種效果,而無需使用占位符來不斷加載 $ 符號。


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


查看完整回答
反對 回復 2023-03-03
?
繁星coding

TA貢獻1797條經驗 獲得超4個贊

用戶“pl2ern4”發布的鏈接幫助我解決了這個問題。我還需要調整輸入文本的 CSS

將美元前綴添加到引導程序輸入框


查看完整回答
反對 回復 2023-03-03
  • 2 回答
  • 0 關注
  • 131 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號