аватар |

Статьи / JavaScript /

Как запретить ввод определённых символов или произвести их замену в поле или 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('имя формы', 'откуда меняем', 'куда вставляем заменённое');"

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

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



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Заменяем определённые символы в поле ввода средствами JS</title>
</head>

<body>


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

<script>
    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[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;
    }
</script>


<form name="form" id="form">
    <p>Сразу в одном поле 
    <input type="text" id="keyinput"  onchange="convert('form', 'keyinput', 'keyinput');">
    </p>
    
    <p>Из одного в другое 
    <input type="text" id="input_in"  onchange="convert('form', 'input_in', 'input_out');">
    <input type="text" id="input_out">
    </p>
</form>


    </body>
</html>


Демонстрация Скачать исходники


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



Распечатать
Похожие статьи
26 августа 2013 11:08 Как запретить копирование текста с сайта?
22 июля 2015 14:08 Как снять выбор (check) с радио-кнопки (radio button)
02 апреля 2014 11:56 Как сделать кнопку назад или как вернуться на предыдущую страницу? HTML и JS
16 апреля 2013 12:45 Текущая дата (день, месяц, год) скрипт JS
06 февраля 2013 19:07 Кнопка распечатать страницу JavaScript print()


Комментарии к статье (vk.com)