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

How can I add a comma to separate each group of three digits in a text input field?

本文关键字：分隔 数字 三位 文本 输入 字段 添加      更新时间：2023-09-26

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

例如，输入"20"将导致"20"。输入"100"将得到"100"。但如果他们输入"1000"，则会在1和后面的0(例如1000(之间插入逗号。显然，如果数字达到7位数(例如1000000(，这种行为将继续。

有简单的方法吗？我对这一切都有点新手，所以请像和孩子说话一样回答：(

以下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/

为了好玩：

'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

有人想尝试让它变得更好吗？

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

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

是的，这并不难。我相信这份推荐信可能会给你所需要的。

请注意，要使其成为动态的(正如他们键入的那样(，您需要将其连接到输入字段更改处理程序。否则，您可以将其连接到输入字段模糊处理程序(当逗号离开字段时，它将具有在字段中放置逗号的效果(。

尝试一下：它可能需要一点粗花呢。

  1. 取上面的函数：函数addCommas(nStr({…}，并放入一个js文件中。

  2. 在页眉中添加一个脚本链接到jquery库，其中包含：src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">

  3. 请确保您的文本框具有唯一的id。例如：id="comma_input"。

  4. 在同一个js文件中添加

     $(document).ready(function(){ 
     $('#comma_input').keyup(function(){
         $(this).attr('value',addCommas($(this).attr('value')));
     });
 });

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

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

纯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/

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

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;
};
相关文章：