如何将千位分隔符添加到我的 html 表单中

Question

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

Answer 1

尝试一些像这样

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)" />

希望有所帮助

Answer 2

使用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>

Answer 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>

Answer 4

您可以使用Javascript Mask API

Answer 5

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

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

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

Answer 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>

Answer 7

如果您只想使用分隔符在 html 中显示数字，您可以使用 html 中的数字格式管道。

所以如果你有数字 123456，你可以简单地用 HTML 写

<span> {{123456 | number}} </span>

就是这样

Answer 8

在输入更改时添加标点符号或数字逗号。

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>