Question

我有一个表单的文本输入字段，用户可以输入一个数字。我想在每三位数后自动插入一个逗号。

例如，输入“20”将导致“20”。输入'100'将导致'100'。但是如果它们输入'1000'，则在1和随后的0之间插入逗号（例如，1,000）。显然，如果数字达到7位数（例如1,000,000），这种行为将继续存在。

有一种简单的方法吗？我在这方面有点新意，所以请回答，就像你在和一个孩子说话一样：）

Answer 1

以下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'。

在这里试试http://jsfiddle.net/YUSph/

Answer 2

为了它的乐趣：

'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

任何人都想尝试做得更好吗？

Answer 3

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绑定change事件并设置值的工作示例：http://jsfiddle.net/TYyfn/

逗号脚本来自：http://www.mredkj.com/javascript/nfbasic.html

Answer 4

是的，这并不是非常困难。我相信this引用可能会为您提供所需内容。

请注意，为了使其成为动态（因为它们键入），您需要将此连接到输入字段更改处理程序。否则，您可以将其连接到输入字段模糊处理程序（这将导致在离开字段时将逗号放在字段中）。

Answer 5

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

Answer 6

尝试一下：它可能需要一点点推文。

从上面获取函数：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')));
     });
 });

Answer 7

您可以使用标准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>

Answer 8

另一种方法，没有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")

Answer 9

纯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);

演示：http://jsfiddle.net/kevinvanlierde/TYyfn/141/

Answer 10

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

如何在文本输入字段中添加逗号以分隔每组三位数？

10 个答案: