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

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

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

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

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

var rusChars = new Array('"','\''); 
var transChars = new Array(''','''); 
 
function convert(the_form, conv_froms, conv_to) 
 var nameForm = document.forms[the_form][conv_froms].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[the_form][conv_to].value = to; 
>

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

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

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','','');

Если хотим заменить определённые символы в поле — кавычки одинарные и двойные на апостроф, который при сохранении в базе данных не позволит получить некорректные данные).

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

Как вызвать функцию замены символов в поле?

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

onblur="convert('имя формы', 'откуда меняем', 'куда вставляем заменённое');"

Ну и ниже пример работы с файлами и демо-просмотром!

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

 
 
 
 
 
 
 
 
 
 
Заменяем определённые символы в поле ввода средствами JS
 
 
 
 
 
 
Сразу в одном поле 
 
 
 
Из одного в другое 
 
 
 
 
 
 
 

Остались вопросы? Пишите в комментариях!)
И удачи в защите и валидации форм!)

Источник

Как запретить ввод символов в Input на JavaScript

Всем привет. Довольно часто появляется необходимость по тем или иным причинам запретить пользователю вводить в инпуты или другие текстовые поля определенные символы. например можно запретить ввод цифр или наоборот разрешить ввод только чисел, а буквы разрешить. К счастью на JS это легко реализовать. И для того, чтобы это сделать, так же как и при валидации данных формы, нам потребуется регулярное выражение. Какое именно, зависит от того, что нам нужно запретить для ввода. Давайте рассмотрим несколько вариантов.

let name = document.querySelector('#name'); // Получаем input let regex = /8/g; // регулярка только цифры name.oninput = function(){ this.value = this.value.replace(regex, ''); }

let name = document.querySelector(‘#name’); // Получаем input let regex = /6/g; // регулярка только цифры name.oninput = function()

На этом можно было бы завершить, так как все, что было нужно, мы сделали, но давайте разберем этот пример более детально. В первой строке мы вносим в переменную name наш input с id name. Во второй строке в переменную regex занесли то самое регулярное выражение, которое и является основой нашей программы. На четвертой строке мы на инпут вешаем событие oninput, при котором будет срабатывать встроенная в JavaScript функция замены replace, которая принимает в себя два параметра. Первый — что она будет заменять и второй — на что. В нашем случае символы из регулярного выражения мы заме6няем на пустую строку. Другими словами, если мы попробуем напечатать цифры, то они просто не будут отображаться. Проверьте сами.

Как вы уже, наверное, догадались делать замену можно не только на пустоту, но и на любые другие символы. К примеру можно поставить звездочку. И тогда все символы, как при вводе пароля, будут закрыты звездочками. Точно так же, как при input type=»password»

this.value = this.value.replace(regex, '*');

Если вам моя писанина на тему того, как запретить ввод символов в Input на JavaScript, была не совсем понятна, то предлагаю посмотреть на эту тему видео.

Источник

Как сделать запрет ввода букв в поле для ввода input

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

Кто с таким сталкивался, откликнетесь пожалуйста!

Запрет ввода букв в поле Edit
Написал следующий код, но он не дает запрета на ввод букв void __fastcall.

Нужно сделать поле ввода для ввода даты по шаблону
Нужно сделать поле ввода для ввода даты по шаблону ( __ . __ . ____ ). При воде нужно будет вводить.

Календарь для ввода в поле input
Здравствуйте, как сделать — ставим курсор в поле input появляются три календаря вертикально три.

Как сделать поле для ввода пароля
В Java есть jPasswordField вроде. В С# не нашёл похожего. Какие есть варианты?

По поводу автоматического запрета, то тут на сколько я понимаю, всё равно необходима постоянная проверка. Для этого необходимо прибегнуть к JAvaScript -у. К инпуту прикручиваем событие onkeyup или onkeypress и вызываем фукцию, которая в свою очередь и проверяет, является ли символ буквой или нет.

script type="text/javascript"> function proverka(input) { var value = input.value; var rep = /[-\.;":'a-zA-Zа-яА-Я]/; if (rep.test(value)) { value = value.replace(rep, ''); input.value = value; } } script> input type="text" onkeyup="return proverka(this);" />

Halva правильно сказал, ещё можно onChange проверять с помощью Ajax.К php никакого отношения не имеет.

Сообщение от dimjan4

Сообщение от dimjan4

Сообщение от dimjan4

Сообщение от dimjan4

Для этого придётся писать серверную часть приложения. И я не понял на счёт PHP.Смысла не понял предложения. Можно и не его,а другой язык использовать.

Сообщение от Halva

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

script type="text/javascript"> function proverka(input) { var value = input.value; var rep = /[-\.;":'a-zA-Zа-яА-Я]/; if (rep.test(value)) { value = value.replace(rep, ''); input.value = value; } } script> 

Очень старая тема. Но, может кому-то пригодится.
На самом деле все делается ГОРАЗДО проще.
Элементу своему пишете на событие keydown

onkeydown = «javascript : return ((event.keyCode>47)&&(event.keyCode<58))"

И нажатия всех нецифровых клавиш в этом поле просто игнорируются.

Сообщение от Demetri

Зато с помощью копипасты по-прежнему можно вставлять всё, что угодно.

А еще старее темы Вы не нашли?

Сообщение от Demetri

Очень старая тема. Но, может кому-то пригодится.
На самом деле все делается ГОРАЗДО проще.
Элементу своему пишете на событие keydown

onkeydown = «javascript : return ((event.keyCode>47)&&(event.keyCode<58))"

И нажатия всех нецифровых клавиш в этом поле просто игнорируются.

попробовала. возможно сделала что-то не так. но при попытке удалить, на клавиши backspace и del не реагирует также как и на буквы.

У меня есть очень изящное решение. Придумала сама, но уверена, что сделала это не первая.
Дело в том что keyup и keypress мы обрабатываем только после того как символ введен и после этого его резко удаляем если надо. То есть если мы сделаем keydown и не отрывая палец подержим то символ будет в поле, только потом пропадет, при отпускании.
Вобщем это все лирика.

Делаем два инпута: в один(невидимый) пишем , потом его парсим. В другой(видимый) выводим.

Реализацию описывать не буду. Там все просто.

Сообщение от zvezda_t

Как таковой блокировки не получится, не получается перехватить, символ должен появиться в поле, только после этого его можно проверить и если надо удалить.
Если кто знает как перехватить символ кросбраузерно, поделитесь. Перехватить и не дать плохому символу появиться в поле. Клавишу то уже нажали, попробуйте скриптом отменить это нажатие.
zvezda_t, есть набор миниатюрных функций делающих все что нужно, ты это ищешь?

Сообщение от a4rodita

попробовала. возможно сделала что-то не так. но при попытке удалить, на клавиши backspace и del не реагирует также как и на буквы.

Все правильно, пропускает только цифры, и как сказал Vovan-VE, старьё с очень узкой специализацией.

Сообщение от Sarabanda

1. пропускает только числа по маске [цифра(ы)][точка][цифра(ы)]
2. работает с любым вводом (клавиатурный, мышью, копи-паст)
3. работает с «залипшей» клавишей
4. показывает, что была попытка неверного ввода и оставляет предыдущее значение
5. код кроссбраузерный

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

script> function Ftest (obj) { if (this.ST) return; var ov = obj.value; var ovrl = ov.replace (/\d*\.?\d*/, '').length; this.ST = true; if (ovrl > 0) {obj.value = obj.lang; Fshowerror (obj); return} obj.lang = obj.value; this.ST = null; } function Fshowerror (obj) { if (!this.OBJ) {this.OBJ = obj; obj.style.backgroundColor = 'pink'; this.TIM = setTimeout (Fshowerror, 50)} else {this.OBJ.style.backgroundColor = ''; clearTimeout (this.TIM); this.ST = null; Ftest (this.OBJ); this.OBJ = null} } script> input oninput="Ftest (this)" onpropertychange="if ('v' == '\v' && parseFloat (navigator.userAgent.split ('MSIE ') [1].split (';') [0]) >

есть только один нюанс — в браузерах MSIE v. от 5.00 до 8.хх при «залипшей» клавише иногда оставляет один недопустимый символ (но после ещё одного нажатия — убирает)

«вылечить» можно, уменьшив время тайм-аута до 15-20 миллисекунд, но это слишком «радикальное» лечение — тогда не видно будет реакции на одиночный ввод недопустимого символа

буду благодарен за любые предложения по более «мягкому» «лечению»

Источник