Разбить число на разряды при вводе в input text

При вводе длинных чисел в текстовое поле становится визуально понятнее и удобнее если числа автоматически бьются на разряды. Сделать такую функцию можно на JS с помощью регулярных выражений и jQuery.

<input id="sum" type="text" placeholder="Введите число">

<script>
function digits_int(target){
	val = $(target).val().replace(/[^0-9]/g, '');
	val = val.replace(/B(?=(d{3})+(?!d))/g, ' ');
	$(target).val(val);
}

$(function($){
	$('body').on('input', '#sum', function(e){
		digits_int(this);
	});
	digits_int('#sum');
});
</script>
HTML

Пример:

Второй пример ограничивает ввод в поле числом с двумя знаками после точки (например:
1 000.00).

<input id="sum" type="text" placeholder="Введите сумму">

<script>
function digits_float(target){
	val = $(target).val().replace(/[^0-9.]/g, '');
	if (val.indexOf(".") != '-1') {
		val = val.substring(0, val.indexOf(".") + 3);
	} 
	val = val.replace(/B(?=(d{3})+(?!d))/g, ' ');
	$(target).val(val);
}

$(function($){
	$('body').on('input', '#sum', function(e){
		digits_float(this);
	});
	digits_float('#sum');
});
</script>
HTML

Пример:

29.03.2022
400

Комментарии

, чтобы добавить комментарий.

Другие публикации

Получить выделенный текст из текстового поля
У текстовых полей (textarea, input text и т.д.) есть JS-свойства selectionStart и selectionEnd, которые возвращают...
4291
+2
Сумма прописью PHP
В PHP 5.3 появился класс NumberFormatter для форматирования чисел и денежных единиц в нужной локали. На его основе была написана функция со склонением слова «рубль».
11250
+3
Поле для выбора количества товаров
Т.к. поле Input type number не подходит для выбора количества товаров из-за его трудной стилизации и возможности...
4665
+4
Копирование текста на сайте с помощью Clipboard.js
Clipboard.js – мини плагин для копирования текста с сайта в буфер обмена, который не использует flash и JQuery.
1288
0
Проверка данных регулярными выражениями
Сборник регулярных выражений с примерами на PHP для проверки данных из полей форм.
10908
+5
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
27460
+30