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

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? Im using html to do the textbox

例如，我有一个文本框，我输入12000，我希望它在文本框中看起来像12,000我将如何做到这一点？我用html做文本框

5 个解决方案

#1

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>

#2

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

希望有所帮助

#3

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>

#4

You can use the Javascript Mask API

您可以使用Javascript Mask API

#5

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. Here is a jQuery plugin which would be useful to get this result:

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

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

#1