我有一個 javascript/jquery 形式的收入輸入欄位：
- 需要一個美元符號：之前
- 隨著貨幣的增加添加逗號
我有一個通過 css 顯示的美元符號，但問題是將它居中并確保欄位入口點在它旁邊而不重疊。不確定如何做逗號。歡迎任何建議或提示！
HTML：
<form id="rev-calculator">
<label for="price">Monthly Revenue</label>
<div class="fields">
<input type="number" name="price" id="price" min="0" max="10000000000" required data-type="number"> </input>
<br>
</form>
CSS：
<style>
.body {
text-align: left;
}
.fields {
margin: 0 10px 0 0;
}
.fields:before {
content: "$";
text-align: center;
position: relative;
left:30px;
}
#price {
border-radius: 5px;
margin: 15px;
padding: 10px;
color: black;
}
</style>
JS：
<script>
$('#rev-calculator').on('click', 'button', function(e) {
e.preventDefault();
var price = $("#price").val();
console.log(price);
})
</script>
代碼筆：https ://codepen.io/kedarPE/pen/JjroYyb
輸入欄
uj5u.com熱心網友回復：
好吧，這是一種方法，盡管實際上并不像我開始走這條路時希望的那么簡單。您可以使用Intl.NumberFormat在那里獲取逗號（根據語言環境）。為了適應小數，我在開始時嗅探它們并將它們附加到結果中。
為了允許逗號，我將其設為具有模式屬性的文本欄位。另外，我調整了你的 CSS 使它看起來更好看 $
$('#price').keydown(function(e) {
setTimeout(() => {
let parts = $(this).val().split(".");
let v = parts[0].replace(/\D/g, ""),
dec = parts[1]
let calc_num = Number((dec !== undefined ? v "." dec : v));
// use this for numeric calculations
console.log('number for calculations: ', calc_num);
let n = new Intl.NumberFormat('en-EN').format(v);
n = dec !== undefined ? n "." dec : n;
$(this).val(n);
})
}).body {
text-align: left;
}
.fields {
margin: 0 10px 0 0;
}
.fields:before {
content: "$";
text-align: center;
position: relative;
left: 35px;
}
#price {
border-radius: 5px;
margin: 15px;
padding: 10px 10px 10px 20px;
color: black;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="rev-calculator">
<label for="price">Monthly Revenue</label>
<div class="fields">
<input type="text" pattern="[0-9.,] " name="price" id="price" required data-type="number" />
<br>
</form>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/370143.html
標籤：javascript html 查询 css 格式化
上一篇：從字串中提取第一次出現