Суть скриптов, которые мы рассмотрим дальше, в том, чтобы на лету ловить действия посетителя и запретить ему вводить что попало в определенное поле, кроме цифр. То есть, когда курсор будет сфокусирован на поле, при попытке нажать на клавиатуре на буквы, в поле ничего не будет происходить, в то же время можно вводить цифры и некоторые символы, такие как + - () и тд, то что может понадобится для поля номер телефона или другого цифрового.
Для работы такого скрипта Вам понадобится в первую очередь само поле для ввода номера. Например у Вас есть поле внутри формы которое выглядит примерно так:
Первый скрипт использует - 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 |
Одна из самых распространённых задач. Вы либо хотите защитить форму от ввода кавычек и слешей, либо хотите произвести мгновенную транслитерацию. Так как же ещё на клиентской стороне привести содержимое формы в нужной порядок?
Как запретить ввод определённых символов или произвести их замену в поле или 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(""",""");
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;
}
Сразу в одном поле
Из одного в другое
Получил я достаточно стандартное задание: фильтровать вводимые юзером символы в 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
