Разрешаем только ввод цифр в поле input

Часто возникает задача запрета ввода не цифровых значений в поле <input>. В этом материале разберем реализацию данного механизма на JavaScript.

На мой взгляд, самый простой способ воспользоваться обработчиком события .keydown() - в jQuery или прослушивать событие keydown. Итак, предположим у нас есть текстовое поле с id = «only_num».

 
<input type="text" id="only_num" value="" />
  

Алгоритм проверки будет такой

1. При нажатии клавиши на клавиатуре ( событие .keydown() ) будем получать keyCode (возвращает код нажатой клавиши) и анализировать его;
2. Для цифр основной клавиатуры keyCode принимает значения от 48 (клавиша 0) до 57 (клавиша 9);
3. Для цифр дополнительной клавиатуры ( Num-клавиатуры ) keyCode принимает значения от 96 (клавиша 0) до 105 (клавиша 9);
4. Так же разрешим:
   • удалять символы ( клавиша 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, но, думаю это не критично, а код получится красивее.

Разрешаем ввод только цифр в поле input на JavaScript

 
const input = document.getElementById('only_num');

input.addEventListener('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();
   }
 }
});
  

Разрешаем ввод только цифр в поле input на jQuery

  
$(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();
   }
 }
  });
});