Добавляйте точки после каждых 3 цифр во всех текстовых полях с помощью JS

#javascript

Вопрос:

В принципе, я хочу, чтобы JS обнаруживал числа и редактировал в реальном времени любой ввод в «текстовых» блоках.

Если пользователь вводит 1000, скрипт должен автоматически проанализировать его и отформатировать до 1.000. Есть ли какой-либо конкретный способ сделать это?

Ответ №1:

Это может помочь http://www.mredkj.com/javascript/nfbasic.html

Это для добавления запятых, поэтому я заменил запятую на точку.

 function addDots(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'); // changed comma to dot here
        }
        return x1   x2;
    }

Ответ №2:

По сути, вы хотите использовать onchange() событие для вашего элемента ввода и отформатировать входную строку.

 <script type="text/javascript">
    function addDecimalPoints(id) {
        var inputElement = document.getElementById(id);
        inputElement.value=inputElement.value.replace(/D/g, '');
        var inputValue = inputElement.value.replace('.', '').split("").reverse().join(""); // reverse
        var newValue = '';
        for (var i = 0; i < inputValue.length; i  ) {
            if (i % 3 == 0) {
                newValue  = '.';
            }
            newValue  = inputValue[i];
        }
        inputElement.value = newValue.split("").reverse().join("");
    }
</script>

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

2. Исправлено путем добавления этого после строки 3: inputElement.value=inputElement.value.replace(/ D / g, «);

Ответ №3:

Я использую regex, у меня это работает:

 function formatNumber(num) {
  return num.toString().replace(/(d)(?=(d{3}) (?!d))/g, '$1.')
}

Полный пример в:https://blog.abelotech.com/posts/number-currency-formatting-javascript

Ответ №4:

Я использую это простое регулярное выражение с предвидением value.replace(/d(?=(?:d{3}) $)/g, '$amp;.');

Ответ №5:

Я смиренно советую вам не делать этого.

Как бы вы это ни делали, это будет неприятно, потому что положение точек будет зависеть от того, сколько символов было введено и сколько еще впереди — когда они вводят 10 , вы не можете знать, собираются ли они ввести еще две цифры или нет.

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

1. Не говоря уже о том, что это 1.000 означает одно для европейцев и другое для американцев.

2. @sarnold не все европейцы 😉

3. Я полагал, что в Европе должны быть некоторые различия в интерпретациях, это довольно большое место; вы не смогли бы вместить все это здесь, по крайней мере, в долгосрочной перспективе.

4. @sarnold ну, я думаю, что в основном британцы из США согласны с США в этом.

5. Веб-сайт ориентирован на определенную страну, и это не должно быть проблемой. Кроме того, onchange работает как шарм, потому что он выполняется, когда пользователь заканчивает редактирование.

Ответ №6:

Вместо этого сделайте это так

 let decimalPoints = id => {
    let target = document.getElementById(id)
    target.value = target.value.toLocaleString('en')
}