如何在我的 html 表单中添加千位分隔符答案

【问题标题】：How do I add Thousands separator to my html form如何在我的 html 表单中添加千位分隔符
【发布时间】：2012-03-19 16:11:20
【问题描述】：

例如，我有一个文本框，我正在输入 12000，我希望它在文本框中看起来像 12,000 我该怎么做？我使用 html 来做文本框

【问题讨论】：

标签： javascript html string concatenation

【解决方案1】：

试试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;
}

然后像这样在你的文本框上使用它

<input type="text" id="txtBox" onchange="return addCommas(this.value)" />

希望有帮助

【讨论】：

感谢百万人！！竖起大拇指@Mark Walters
对于未来的读者，请记住输入 type="number" 会失败，因为 html5 数字字段不能接受逗号
正如@DarrenSweeney 所说，number 不接受逗号。但是type="tel" 会有所作为
用户改号时需要添加x1=x1.replace(\,\g,'')才能正常工作。

【解决方案2】：

使用 jQuery autoNumeric plugin:

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

这可能是个坏主意...

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

您可以使用Javascript Mask API

【讨论】：

【解决方案5】：

对于用户输入，我建议不要将值格式化为包含逗号。处理整数值 (12000) 比处理字符串值 (12,000) 提交后要容易得多。

但是，如果您确定要格式化该值，那么正如@achusonline 所建议的那样，我会屏蔽该值。这是一个 jQuery 插件，可以用来获得这个结果：

http://digitalbush.com/projects/masked-input-plugin/

【讨论】：

“更容易处理......” 真的吗？我的意思是剥离格式真的很简单。困难的是为多语言观众处理格式。但是，如果您要在客户端中添加格式，则在提交时将其剥离是微不足道的。

【解决方案6】：

你可以试试这个简单的 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 代码

<div class="form-group">
                        <label>Amount </label>
                        <input type="text" name="amount"  onkeyup="this.value=addcommas(this.value);"class="form-control" required="">
                      </div>

【讨论】：

【解决方案7】：

在输入变化时添加标点符号或逗号。

html代码

 <input type="text"  onkeyup="this.value=addPunctuationToNumbers(this.value)">

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>

【讨论】：