Разрешаем ввод только цифр в поле input
Часто возникает задача запрета ввода нецифровых значений в поле <input>. В этой статье разберем реализацию данного механизма на jQuery.
На мой взгляд, самый
<input type="text" id="only_num" value="" />
Алгоритм проверки будет такой:
- При нажатии клавиши на клавиатуре ( событие .keydown() ) будем получать keyCode (возвращает код нажатой клавиши) и анализировать его;
- Для цифр основной клавиатуры keyCode принимает значения от 48 (клавиша 0) до 57 (клавиша 9);
- Для цифр дополнительной клавиатуры ( Num-клавиатуры ) keyCode принимает значения от 96 (клавиша 0) до 105 (клавиша 9);
- Так же разрешим:
- удалять символы ( клавиша Del ) keyCode == 46;
- переключаться клавишей Tab между полями keyCode == 9;
- нажимать Backspace keyCode == 8;
- нажимать Esc keyCode == 27;
- выделять текст сочетанием Ctrl + A – вот тут клавиша A имеет код keyCode == 65, а событие зажатого Ctrl ctrlKey должно быть строго истина, т.е. получаем условие – ( event.keyCode == 65 && event.ctrlKey === true );
- разрешим клавишу Home keyCode == 36;
- разрешим клавишу End keyCode == 35;
- разрешим клавишу влево keyCode == 37;
- разрешим клавишу вправо keyCode == 39;
Последние четыре требования можно объединить в одно – ( event.keyCode >= 35 && event.keyCode <= 39 ), правда в этом случае мы разрешаем еще нажатие клавиши вверх keyCode == 38, но, думаю это не критично, а код получится красивее.
Итак,
$(document).ready(function() { $("#only_num").keydown(function(event) { // Разрешаем: backspace, delete, tab и escape if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || // Разрешаем: Ctrl+A (event.keyCode == 65 && event.ctrlKey === true) || // Разрешаем: home, end, влево, вправо (event.keyCode >= 35 && event.keyCode <= 39)) { // Ничего не делаем return; } else { // Запрещаем все, кроме цифр на основной клавиатуре, а так же Num-клавиатуре if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) { event.preventDefault(); } } }); });