Дизайн та розробка сайту

Как запретить ввод текста в поле ввода, проверка на ввод цифр.

Запрет на ввод букв

Доброго времени суток 🙂

В этой статье предлагаю затронуть тему, проверки поля input на ввод только цифр, то есть, чтобы посетитель сайта не смог ввести в поле ввода ничего кроме цифр. Такое решение может понадобиться многим. Скажу сразу это будет решение с помощью скриптов. Конечно, есть решения проще когда человек введет вместо цифр буквы, а после кнопки отправить ему высветит ошибку, что поле заполнено не правильно, но что делать, если отправка данных происходит без перезагрузки страницы, то есть тем же AJAX. Получится все что не введет посетитель всеравно отправится, даже если он в поле input с типом - type="tel", предназначенное для телефона введет текст.

Запрет на ввод букв

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

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

<input id="#tel" type="tel" name="tel" placeholder="Введите здесь ваш номер" >

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

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

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

<script type="text/javascript">
/// СЮДА КОД ...
</script>

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

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 <= 40) ||(key >= 48 && key <= 57) ||(key >= 96 && key <= 105) || key == 107 || key == 109 || key == 173|| key == 61  ); });
    });
};
$('#tel').forceNumbericOnly();
});

Скрипт срабатывает на нажатие клавиш. В 8 строке задаются коды тех клавиш которые можно нажимать и значения которых появятся в поле ввода. Например, самый первый код - 8. Это код клавиши Backspace, то есть той что стирает написанное. Нужные коды можно посмотреть в таблице под статьей. В предпоследней строке указываем АЙДИ нужного поля ввода. В нашем случаи ID - #tel, в примере с полем ввода, это прекрасно видно.

Второй код выполнен в чистом javascript и немного отличается. Он разрешает вводить только цифры и backspace, enter, стрелочку назад, вперед. Конечно же Вы можете добавить новые коды для расширения возможностей. Айди нужного поля задается в первой строке. Ну и сам код собственно:

<script  type="text/javascript">
document.getElementById("tel").onkeypress= function(event){
 event= event || window.event;
 if (event.charCode && (event.charCode < 48 || event.charCode > 57))
  return false;
};
</script>

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

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

Таблица виртуальных кодов клавиш для 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
D 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

Дизайн та розробка сайту

Back to top