Как добавить запятую для разделения каждой группы из трех цифр в поле ввода текста?

Question

У меня есть поле ввода текста для формы, где пользователи должны вводить число. Я хотел бы автоматически вставлять запятую после каждой третьей цифры.

Например, если ввести «20», получится «20». Ввод «100» приведет к «100». Но если они введут «1000», запятая будет вставлена ​​между 1 и последующими 0 (например, 1000). Очевидно, что такое поведение продолжится, если число достигнет 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

Да, это не очень сложно.Я полагаю, что эта ссылка может дать вам то, что вам нужно.

Обратите внимание, что для того, чтобы это было динамическим (по мере их ввода), вам нужно будет подключить его к обработчику изменения поля ввода.В противном случае вы можете подключить это к обработчику размытия поля ввода (который будет иметь эффект помещения запятых в поле, когда они покидают поле).

Answer 4

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

Answer 5

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

Answer 6

Простое строковое решение в pure 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 7

Еще один способ сделать это, нет 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 8

Вы можете использовать стандартные функции 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 9

Попробуйте: может понадобиться небольшой подстройка.

1. возьмите функцию сверху: function addCommas (nStr) {...} и поместите в файл js.

2. добавьте ссылку на скрипт в заголовке страницы в библиотеку jquery с помощью: src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"

3. убедитесь, что у вашего текстового поля есть уникальный идентификатор. Ex: id= "comma_input".

4. в том же файле JS добавить

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

Answer 10

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