Запретить вводить буквы в input. Фильтр символов вводимых в input. Запретить ввод в поле, чтобы можно было пользоваться только кнопками редактирования

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

Как запретить ввод определённых символов или произвести их замену в поле или textarea JS? Логика простая - создаём первый массив с символами, которые хотим заменить, а затем второй - с теми, которые вставим вместо первых. Итого: два массива с одинаковым(!) количеством элементов.

var transChars = new Array(""",""");

{

var from = nameForm;

Var to = "";
var len = from.length;
var character, isRus;
for (var i = 0; i < len; i++)
{

isRus = false;
for (var j = 0; j < rusChars.length; j++)
{

{
isRus = true;
break;
}
}

}

}
Можно заполнить массивы и своим символами на замену. Все, что нужно Вам! Ниже примеры.

Если хотим заменить, например, кириллицу на латинские символы, ну или, проще говоря, произвести мгновенную транслитерацию) Смотрим ниже:

Var rusChars = new Array("А","а","Б","б","В","в","Г","г","Д","д","Е","е","Ё","ё","Ж","ж","З","з",


"Ш","ш","Щ","щ","Э","э","Ю","ю","Я","я","Ы","ы","Ъ","Ь");



"sh","sh","csh","csh","e","e","u","u","ya","ya","i","i","","");
Если хотим заменить определённые символы в поле - кавычки одинарные и двойные на апостроф, который при сохранении в базе данных не позволит получить некорректные данные).

Var rusChars = new Array(""","\"");
var transChars = new Array(""",""");

Как вызвать функцию замены символов в поле? Дописываем в конце input или textarea следующее. Первое значение идентификатор формы, второе - поле с введёнными символами, третье - если хотим отобразить в другом поле символы, то указываем идентификатор уже второго поля. Можно оставить идентификатор всё того же)

Onblur="convert("имя формы", "откуда меняем", "куда вставляем заменённое");"
Ну и ниже пример работы с файлами и демо-просмотром!

Несколько демо-примеров замены символов в полях ввода

Заменяем определённые символы в поле ввода средствами JS

var rusChars = new Array("А","а","Б","б","В","в","Г","г","Д","д","Е","е","Ё","ё","Ж","ж","З","з",
"И","и","Й","й","К","к","Л","л","М","м","Н","н","О","о","П","п",
"Р","р","С","с","Т","т","У","у","Ф","ф","Х","х","Ч","ч","Ц","ц",
"Ш","ш","Щ","щ","Э","э","Ю","ю","Я","я","Ы","ы","Ъ","Ь",""","\"");
var transChars = new Array("a","a","b","b","v","v","g","g","d","d","e","e","jo","jo","zh","zh","z","z",
"i","i","y","y","k","k","l","l","m","m","n","n","o","o","p","p",
"r","r","s","s","t","t","u","u","f","f","h","h","ch","ch","ts","ts",
"sh","sh","csh","csh","e","e","u","u","ya","ya","i","i","","","","");

Function convert(the_form, conv_froms, conv_to)
{
var nameForm = document.forms.value;
var from = nameForm;

Var to = "";
var len = from.length;
var character, isRus;
for (var i = 0; i < len; i++)
{
character = from.substr(i,1);
isRus = false;
for (var j = 0; j < rusChars.length; j++)
{
if (character == rusChars[j])
{
isRus = true;
break;
}
}
to += (isRus) ? transChars[j] : character;
}
document.forms.value = to;
}

Сразу в одном поле

Из одного в другое

имя ключа параметра значение ключа параметра, которое может содержать: цифры «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; } - +

Получил я достаточно стандартное задание: фильтровать вводимые юзером символы в 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