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

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

1
<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

Пример:

2

Второй пример ограничивает ввод в поле числом с двумя знаками после точки (например:
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, обновлено 03.03.2024
7690

Комментарии 2

Alisher Ahmedov Alisher Ahmedov
14 июня 2022 в 08:20
Добрый день!
Ваш код не работает даже в CodePen
Archer Archer
22 июня 2022 в 12:40
Все работает, спасибо

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

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

Получить выделенный текст из текстового поля
У текстовых полей (textarea, input text и т.д.) есть JS-свойства selectionStart и selectionEnd, которые возвращают...
6364
+1
Сумма прописью PHP
В PHP 5.3 появился класс NumberFormatter для форматирования чисел и денежных единиц в нужной локали. На его основе была написана функция со склонением слова «рубль».
17082
+5
Поле для выбора количества товаров
Т.к. поле Input type number не подходит для выбора количества товаров из-за его трудной стилизации и возможности...
10373
+3
Копирование текста на сайте с помощью Clipboard.js
Clipboard.js – мини плагин для копирования текста с сайта в буфер обмена, который не использует flash и JQuery.
7322
0
Проверка данных регулярными выражениями
Сборник регулярных выражений с примерами на PHP для проверки данных из полей форм.
18997
+7
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
43731
+34