我有一个用于用户输入数字的表单的文本输入字段。我想在每三个数字后自动插入一个逗号。
例如，输入“20”将导致“20”。输入“100”将导致“100”。但如果他们要输入“1000”，则会在 1 和后面的 0 之间插入一个逗号（例如 1,000）。显然，如果数字达到 7 位（例如 1,000,000），这种行为将继续存在。
有没有简单的方法来做到这一点？我对这一切有点陌生，所以请像在和孩子说话一样回答:)
【问题讨论】：
number.toLocaleString("en");
标签： javascript html css input number-formatting
以下javascript：
function format(input)
{
var nStr = input.value + '';
nStr = nStr.replace( /\,/g, "");
var x = nStr.split( '.' );
var x1 = x[0];
var x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while ( rgx.test(x1) ) {
x1 = x1.replace( rgx, '$1' + ',' + '$2' );
}
input.value = x1 + x2;
}
以及以下 HTML：
<input type="text" onkeyup="format(this)">
应该可以解决您的问题。关键是使用'onkeyup'。
【讨论】：
为了好玩：
'9876543210'
.split('') // flip the entire string so that we can break every
.reverse() // 3rd digit, starting from the end
.join('')
.split(/(...)/) // split on every 3rd
.reverse() // flip the string again, though now each group of 3 is
.join(',') // backwards
.replace(/,(?=,)|,$|^,/g, '') // remove extra ,
.replace(/(,|^)(\d)(\d)?(\d)?/g, '$1$4$3$2') // flip each group of digits
// 9,876,543,210
有人想尝试让它变得更好吗？
【讨论】：
"1234567".split('').reverse().join('').replace(/(.{3})/g,'$1,').replace(/,$/,'').split('').reverse().join('')
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;
}
将输入的值传递给函数并使用返回的结果设置输入。您可以将其绑定到 onchange 事件。
这是一个依赖 jquery 绑定更改事件并设置值的工作示例：http://jsfiddle.net/TYyfn/
【讨论】：
是的，这并不难。我相信this 参考可能会给你你所需要的。
请注意，要使其成为动态的（当他们键入时），您需要将其连接到输入字段更改处理程序。否则，您可以将其连接到输入字段模糊处理程序（当逗号离开字段时，它将产生将逗号放入字段的效果）。
【讨论】：
试一试：它可能需要稍微调整一下。
把上面的函数：function addCommas(nStr){...} 放入一个js文件中。
在页眉中添加一个脚本链接到 jquery 库： src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"
确保您的文本框具有唯一 ID。例如：id="comma_input"。
在同一个js文件中添加
$(document).ready(function(){
$('#comma_input').keyup(function(){
$(this).attr('value',addCommas($(this).attr('value')));
});
});
【讨论】：
function addCommas(nStr){
var offset = nStr.length % 3;
if (offset == 0)
return nStr.substring(0, offset) + nStr.substring(offset).replace(/([0-9]{3})(?=[0-9]+)/g, "$1,");
else
return nStr.substring(0, offset) + nStr.substring(offset).replace(/([0-9]{3})/g, ",$1");
}
alert(addCommas("1234567"));
【讨论】：
另一种方法，没有 RegEx，只是数组操作：
function decimalMark(s) {
for (var a = s.split("").reverse(), b = [], i = 0; i < a.length; i++) {
if (i && i%3 === 0)
b.unshift(",");
b.unshift(a[i]);
}
return b.join("");
}
一定要给函数传递一个字符串
decimalMark("1234")
【讨论】：
纯JS中的简单字符串解决方案：
function addCommas(e) {
var tgt = e.target, val = tgt.value.replace(/,/g, ''),
amt = Math.ceil(val.length/3), newStr = '', x = 0;
while ( x <= amt ) {
newStr += val.slice(x*3,(x+1)*3);
newStr += ( x < amt-1 ) ? ',' : '';
x++
}
tgt.value = newStr;
}
document.getElementById('test').addEventListener('change', addCommas, false);
【讨论】：
您可以使用标准的 JavaScript 函数。这里的例子； http://jsfiddle.net/azur/jD5pa/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>pure js solution</title>
<script type='text/javascript'>
function digitGroup(dInput) {
var output = "";
try {
dInput = dInput.replace(/[^0-9]/g, ""); // remove all chars including spaces, except digits.
var totalSize = dInput.length;
for (var i = totalSize - 1; i > -1; i--) {
output = dInput.charAt(i) + output;
var cnt = totalSize - i;
if (cnt % 3 === 0 && i !== 0) {
output = " " + output; // seperator is " "
}
}
} catch (err)
{
output = dInput; // it won't happen, but it's sweet to catch exceptions.
}
return output;
}
</script>
</head>
<body>
<input type="text" value="53" onkeyup="this.value = digitGroup(this.value);">
</body>
</html>
【讨论】：
var formatNumber = function(num, type) {
var numSplit, int, dec, type;
num = Math.abs(num);
num = num.toFixed(2);
numSplit = num.split('.')
int = numSplit[0];
if (int.length >= 3) {
int = int.substr(0, int.length - 3) + ',' + int.substr(int.length - 3, 3);
}
dec = numSplit[1];
return (type === 'exp'? sign = '-' : '+') + ' ' + int + '.' + dec;
};
【讨论】：