Javascript HTML 输入类型数字千位分隔符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31867551/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML Input type number Thousand separator
提问by tije
I want to have a thousand separator (e.g. 1,000,000) in my Input field. However, it has to be of type numberbecause I need to be able to adjust its value using "step". Code:
我想在我的输入字段中有千位分隔符（例如 1,000,000）。但是，它必须是 number 类型，因为我需要能够使用“step”来调整它的值。代码：
<input type="number" id='myNumber' value="40,000" step='100'>
I tried using Javascript to adjust the value but didn't work. Any help would be appreciated. Thanks!
我尝试使用 Javascript 来调整值，但没有奏效。任何帮助，将不胜感激。谢谢！
回答by Hawlett
Using autoNumericplugin you can made a field as numeric input with different separators.
使用autoNumeric插件，您可以将字段作为具有不同分隔符的数字输入。
Include plugin:
包括插件：
<script src="~/Scripts/autoNumeric/autoNumeric.min.js" type="text/javascript"></script>
Html:
网址：
<input type="text" id="DEMO" data-a-sign="" data-a-dec="," data-a-sep="." class="form-control">
Script:
脚本：
<script>
jQuery(function($) {
$('#DEMO').autoNumeric('init');
});
</script>
You can type only number, if you input 100000,99 you will see 100.000,99.
您只能输入数字，如果您输入 100000,99，您将看到 100.000,99。
回答by Iman
- Check this webdesign.tutsplus.com tutorial
Final result is summarized here (look at direct Codepen playground)
$("#formInput".on("keyup", function(event ) { // When user select text in the document, also abort. var selection = window.getSelection().toString(); if (selection !== '') { return; } // When the arrow keys are pressed, abort. if ($.inArray(event.keyCode, [38, 40, 37, 39]) !== -1) { return; } var $this = $(this); // Get the value. var input = $this.val(); input = input.replace(/[\D\s\._\-]+/g, ""); input = input?parseInt(input, 10):0; $this.val(function () { return (input === 0)?"":input.toLocaleString("en-US"); }); });
- 检查这个webdesign.tutsplus.com 教程
最终结果总结在这里（直接看Codepen playground）
$("#formInput".on("keyup", function(event ) { // When user select text in the document, also abort. var selection = window.getSelection().toString(); if (selection !== '') { return; } // When the arrow keys are pressed, abort. if ($.inArray(event.keyCode, [38, 40, 37, 39]) !== -1) { return; } var $this = $(this); // Get the value. var input = $this.val(); input = input.replace(/[\D\s\._\-]+/g, ""); input = input?parseInt(input, 10):0; $this.val(function () { return (input === 0)?"":input.toLocaleString("en-US"); }); });
Notes:
笔记：
- toLocaleString() javascript function Actually show thousands separator (example and doc)
run below code in your console to get the idea
(30000000).toLocaleString('en-US',{useGrouping:true})
- toLocaleString() javascript 函数实际显示千位分隔符（示例和文档）
在您的控制台中运行以下代码以获得想法
(30000000).toLocaleString('en-US',{useGrouping:true})
回答by yovanny olarte
try
尝试
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, '' + ',' + '');
}
return x1 + x2;
}
回答by kurdtpage
csqrecommends using the jQuery autoNumeric plugin. I found it to be very easy and intuitive to use.
csq建议使用jQuery autoNumeric 插件。我发现它使用起来非常简单和直观。
My only gripe is that it forces <input type="text">rather than <input type="number">. This means you lose the funcionality of step, but you gain users of your site being able to use commas in fields.
我唯一的抱怨是它强制<input type="text">而不是<input type="number">. 这意味着您失去了 的功能step，但您网站的用户可以在字段中使用逗号。
I guess you could use expected values of less than 1,000 as <input type="number">and values more than 1,000 as <input type="text">
我猜你可以使用小于 1,000 的期望值和大于 1,000 的<input type="number">值作为<input type="text">
回答by jessh
You can fake this functionality by using a pseudo-element to display the comma version.
您可以通过使用伪元素来显示逗号版本来伪造此功能。
div[comma-value]{
position:relative;
}
div[comma-value]:before{
content: attr(comma-value);
position:absolute;
left:0;
}
div[comma-value] input{
color:#fff;
}
A wrapping div is required because inputs can't have pseudo elements.
需要一个包装 div，因为输入不能有伪元素。
<div>
<input type="number" id='myNumber' value="40000" step='100'>
</div>
And a little bit of JavaScript to insert commas every third character
还有一点点 JavaScript 来每隔三个字符插入一个逗号
myNumber.value = commify(myNumber.value)
myNumber.addEventListener("change", function(){
commify(event.target.value)
})
function commify(value){
var chars = value.split("").reverse()
var withCommas = []
for(var i = 1; i <= chars.length; i++ ){
withCommas.push(chars[i-1])
if(i%3==0 && i != chars.length ){
withCommas.push(",")
}
}
var val = withCommas.reverse().join("")
myNumber.parentNode.setAttribute("comma-value",val)
}
Check out the fiddle
检查小提琴
