如何将千位分隔符添加到我的 html 表单中
[英]How do I add Thousands separator to my html form
问题描述
For example i have a textbox, I am entering 12000 and i want it to look like 12,000 in the textbox How would I do this?
例如，我有一个文本框，我输入 12000 并且我希望它在文本框中看起来像 12,000 我该怎么做？ Im using html to do the textbox我使用 html 来做文本框
8 个解决方案
解决方案1
10 2012-03-19 16:18:10
Try something like this 尝试一些像这样
function addCommas(nStr)
{
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
Then use it on your textboxes like so 然后在你的文本框上使用它
<input type="text" id="txtBox" onchange="return addCommas(this.value)" />
Hope that helps 希望有所帮助
解决方案2
7 2014-02-25 15:41:32
Use the jQuery autoNumeric plugin : 使用jQuery autoNumeric插件 ：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Input with separator</title>
<script type="text/javascript" src="jquery-1.11.0.js"></script>
<script type="text/javascript" src="autoNumeric.js"></script>
<script type="text/javascript">
$( document ).ready( function() {
$("#myinput").autoNumeric(
'init', {aSep: ',', mDec: '0', vMax: '99999999999999999999999999'}
);
});
</script>
</head>
<body>
<input id="myinput" name="myinput" type="text" />
</body>
</html>
解决方案3
3 已采纳 2012-03-19 16:52:04
This is probably a bad idea... 这可能是一个坏主意......
<!doctype html>
<html lang="en">
<head>
<meta charset= "utf-8">
<title>Comma Thousands Input</title>
<style>
label, input, button{font-size:1.25em}
</style>
<script>
// insert commas as thousands separators
function addCommas(n){
var rx= /(\d+)(\d{3})/;
return String(n).replace(/^\d+/, function(w){
while(rx.test(w)){
w= w.replace(rx, '$1,$2');
}
return w;
});
}
// return integers and decimal numbers from input
// optionally truncates decimals- does not 'round' input
function validDigits(n, dec){
n= n.replace(/[^\d\.]+/g, '');
var ax1= n.indexOf('.'), ax2= -1;
if(ax1!= -1){
++ax1;
ax2= n.indexOf('.', ax1);
if(ax2> ax1) n= n.substring(0, ax2);
if(typeof dec=== 'number') n= n.substring(0, ax1+dec);
}
return n;
}
window.onload= function(){
var n1= document.getElementById('number1'),
n2= document.getElementById('number2');
n1.value=n2.value='';
n1.onkeyup= n1.onchange=n2.onkeyup=n2.onchange= function(e){
e=e|| window.event;
var who=e.target || e.srcElement,temp;
if(who.id==='number2') temp= validDigits(who.value,2);
else temp= validDigits(who.value);
who.value= addCommas(temp);
}
n1.onblur= n2.onblur= function(){
var temp=parseFloat(validDigits(n1.value)),
temp2=parseFloat(validDigits(n2.value));
if(temp)n1.value=addCommas(temp);
if(temp2)n2.value=addCommas(temp2.toFixed(2));
}
}
</script>
</head>
<body>
<h1>Input Thousands Commas</h1>
<div>
<p>
<label> Any number <input id="number1" value=""></label>
<label>2 decimal places <input id="number2" value=""></label>
</p></div>
</body>
</html>
解决方案4
2 2012-03-19 16:13:54
您可以使用Javascript Mask API
解决方案5
2 2012-03-19 16:14:01
For user input I would recommend not formatting the value to include a comma. 对于用户输入，我建议不要格式化值以包含逗号。 It will be much easier to deal with an integer value (12000), than a string value (12,000) once submitted. 一旦提交，处理整数值（12000）将比处理字符串值（12,000）容易得多。
However if you are certain on formatting the value, then as @achusonline has recommended, I would mask the value. 但是，如果您确定要格式化值，那么正如@achusonline建议的那样，我会屏蔽该值。 Here is a jQuery plugin which would be useful to get this result: 这是一个jQuery插件，可以获得这个结果：
http://digitalbush.com/projects/masked-input-plugin/ http://digitalbush.com/projects/masked-input-plugin/
解决方案6
0 2019-05-18 15:57:41
You can try this simple Javascript 你可以尝试这个简单的Javascript
<script type="text/javascript">
function addcommas(x) {
//remove commas
retVal = x ? parseFloat(x.replace(/,/g, '')) : 0;
//apply formatting
return retVal.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
</script>
HTML Code HTML代码
<div class="form-group">
<label>Amount </label>
<input type="text" name="amount" onkeyup="this.value=addcommas(this.value);"class="form-control" required="">
</div>
解决方案7
0 2021-12-06 06:41:38
If you just want to show the number in html with the seperator you can use the Number formating pipe in html.如果您只想使用分隔符在 html 中显示数字，您可以使用 html 中的数字格式管道。
So if you have the number 123456, you can simply write in HTML所以如果你有数字 123456，你可以简单地用 HTML 写
<span> {{123456 | number}} </span>
That's it就是这样
解决方案8
0 2021-12-06 07:35:59
adding punctuation or commas of numbers on input change.在输入更改时添加标点符号或数字逗号。
html code html代码
<input type="text" onkeyup="this.value=addPunctuationToNumbers(this.value)">
Javascript Code Javascript代码
<script>
function addPunctuationToNumbers(number) {
return number.replace(/(\d{3})(?=\d)/g, "$1,");
}
</script>
<!DOCTYPE html> <html> <body> <h1>On change add pumctuation to numbers</h1> <input type="text" onkeyup="this.value=addPunctuationToNumbers(this.value)"> <script> function addPunctuationToNumbers(number) { return number.replace(/(\\d{3})(?=\\d)/g, "$1,"); } </script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.