Ограничение на ввод символов input. Как запретить ввод определённых символов или произвести их замену в поле или textarea JS? Как запретить определенные символы в input

имя ключа параметра значение ключа параметра, которое может содержать: цифры «0-9», один плюс «+» или минус «-», один символ «e» или «E», одну точку «.». Можно ввести буквы, но форма не будет отправлена при нажатии на кнопку submit , а покажет сообщение об ошибке. Чаще всего не задаётся. Пользователь может его изменить, если не указаны атрибуты readonly и disabled . заблокировано изменение пользователем заблокированы доступ, изменение пользователем и передача данных текущего параметра поле не может быть пустым

Шаг изменения, который может быть положительным целым или дробным числом. Значение value кратно значению step , то есть делится на него без остатка. Пример разрешённых значений value при step="20" : …, -40, -20, 0, 20, 40, …. По умолчанию равен 1 . То есть покажет ошибку, если ввести десятичную дробь. Для того, чтобы убрать ограничения, нужно присвоить any . минимально возможное значение value , необходимое для отправки формы максимально возможное значение value , необходимое для отправки формы подсказка-заглушка всплывающая подсказка при наведении курсора мышки автозаполнение. Можно его отключить или сделать более конкретизированным. список рекомендованных значений фокус поля (то есть период между щелчком по элементу и щелчком вне элемента) получен при загрузке документа

Поле не подходит для текстовых строк, состоящих из 16 и более цифр, например, номера пластиковой карты, так как длинные числа от 9007199254740991 могут округляться.

Количество товара

увеличение и уменьшение значения числового поля с помощью кнопок пошагового изменения,

сообщение об ошибки при вводе букв и дробных чисел,

минимальное значение 1.

шт Чётные положительные целые числа Нечётные положительные целые числа Круглые числа Десятичная дробь с плавающей запятой Денежный формат цены: «рубли,копейки» с двумя знаками после запятой ₽ Ограничить количество символов в поле до 5 Уменьшить длину

Атрибуты minlength , maxlength и size не работают.

Необходимое количество символов в поле определяется атрибутами min , max и step:

Указать ширину в CSS (свойство width): #dva { width: 6em; }

Стрелки у Чтобы стрелочки были изначально, а не только при:hover и:focus в Chrome #pyat::-webkit-inner-spin-button { opacity: 1; } Убрать стрелки .raz { -moz-appearance: textfield; } .raz::-webkit-inner-spin-button { display: none; } Стилизация стрелок «вверх»/«вниз» CSS #raz { position: relative; display: inline-block; } #raz input { font-size: 1em; -moz-appearance: textfield; } #raz input::-webkit-inner-spin-button { display: none; } #raz span { position: absolute; } @supports (clip-path: polygon(50% 30%, 10% 90%, 90% 90%)) { #raz input { padding-right: 1em; } #raz span { right: 0; width: 1em; height: 50%; background: rgb(70,70,70); cursor: pointer; } #raz span:hover { background: red; } #raz span:nth-of-type(1) { top: 0; clip-path: polygon(50% 30%, 10% 90%, 90% 90%); } #raz span:nth-of-type(2) { bottom: 0; clip-path: polygon(50% 70%, 10% 10%, 90% 10%); } } Запретить ввод в поле, чтобы можно было пользоваться только кнопками редактирования - + .raz { all: unset; -moz-appearance: textfield; width: 3em; text-align: center; } .raz::-webkit-inner-spin-button { display: none; } - +

Суть скриптов, которые мы рассмотрим дальше, в том, чтобы на лету ловить действия посетителя и запретить ему вводить что попало в определенное поле, кроме цифр. То есть, когда курсор будет сфокусирован на поле, при попытке нажать на клавиатуре на буквы, в поле ничего не будет происходить, в то же время можно вводить цифры и некоторые символы, такие как + - () и тд, то что может понадобится для поля номер телефона или другого цифрового.

Для работы такого скрипта Вам понадобится в первую очередь само поле для ввода номера. Например у Вас есть поле внутри формы которое выглядит примерно так:

Первый скрипт использует - jQuery , поэтому в шапку Вашего сайта перед закрывающимся head или в подвал перед закрывающимсяbody нужно добавить подключение библиотеки jQuery . Если Вы это делали или это делает система управлением сайтом (движок сайта), то делать этого не нужно. Можете посмотреть исходный код сайта и если где-то есть похожая строчка, то значит этот шаг нужно пропустить. Если же подключения нет, то нужно добавить вот такую строку:

Теперь очередь самого скрипта. Его добавляем в отдельный файл и подключаем после библиотеки или же заключаем в теги:

/// СЮДА КОД...

Ну и собственно сам код:

JQuery(document).ready(function($){ $.fn.forceNumbericOnly = function() { return this.each(function() { $(this).keydown(function(e) { var key = e.charCode || e.keyCode || 0; return (key == 8 || key == 9 || key == 46 ||(key >= 37 && key = 48 && key = 96 && key 57)) return false; };

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

На этом все, спасибо за внимание. 🙂

Таблица виртуальных кодов клавиш для javascript, которую обещал выше.

Клавиша	10-ный код	Клавиша	10-ный код
Backspace	8
Tab	9	Enter	13
Shift	16	Ctrl	17
Alt	18	Pause	19
CapsLock	20	Esc	27
пробел	32	PageUp	33
PageDown	34	End	35
Home	36	стрелка влево	37
стрелка вверх	38	стрелка вправо	39
стрелка вниз	40	Insert	45
Delete	46	0	48
1	49	2	50
3	51	4	52
5	53	6	54
7	55	8	56
9	57	A	65
B	66	C	67
	68	E	69
F	70	G	71
H	72	I	73
J	74	K	75
L	76	M	77
N	78	O	79
P	80	Q	81
R	82	S	83
T	84	U	85
V	86	W	87
X	88	Y	89
Z	90	левая клавиша Windows	91
правая клавиша Windows	92	клавиша Applications	93
NumPad 0	96	NumPad 1	97
NumPad 2	98	NumPad 3	99
NumPad 4	100	NumPad 5	101
NumPad 6	102	NumPad 7	103
NumPad 8	104	NumPad 9	105
NumPad *	106	NumPad +	107
NumPad -	109	NumPad .	110
NumPad /	111	F1	112
F2	113	F3	114
F4	115	F5	116
F6	117	F7	118
F8	119	F9	120
F10	121	F11	122
F12	123	NumLock	144
ScrollLock	145	PrintScreen	154
Meta	157	;	186
=	187	,	188
-	189	.	190
/	191	~	192
[	219	\	220
]	221	"	222

Получил я достаточно стандартное задание: фильтровать вводимые юзером символы в input, т. е. пользователь может ввести в строку набор цифр и букв, например, "5s68d.4r55e.6t5", а на сервер я должен отправить корректное для сохранения сумму в рублях - "568,455" (рублей).

Справился я с заданием достаточно быстро, повесив на input событие focusout, но у моего решения был ряд важных недостатков: где в данном примере заканчивается сумма в рублях и начинаются копейки? Если пользователь введет несколько минуcов (отрицательные значения тоже корректны в данном случае), то какой из минусов считать началом строки? И так далее.

Поэтому появилась вторая версия скрипта с регулярными выражениями на событие keyup:

$(e.curretTarget).val(($(e.currentTarget).val()).replace(/[^0123456789.-]/, ""))
Но как оказалось, этот способ имел ощутимый недостаток (я не имею ввиду то, что пользователь видит символ, который вводит и потом этот символ пропадает), а именно - если поставить курсор, например, посередине введенного числа в input, ввести букву, то скрипт вырежет букву, но перекинет курсов в конец строки.

По этой причине старший товарищ дал указание написать функцию на событие keypress. Через 30 минут уже третий вариант функции был готов и имел он примерно такой вид:

Function() { return this.each(function() { $(this).keydown(function(e) { var key = e.charCode || e.keyCode || 0; // allow backspace, tab, delete, enter, arrows, numbers and keypad numbers ONLY // home, end, period, and numpad decimal return (key == 8 || key == 9 || key == 13 || key == 46 || key == 110 || key == 190 || (key >= 35 && key = 48 && key = 96 && key