меню

Часто возникает задача запрета ввода не цифровых значений в поле <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();
   }
 }
  });
});
 

Возможно, вам будет интересно

Что такое ECMAScript и чем это отличается от JavaScript

Изучение JavaScript может сбить с толку по множеству причин, и одна из них — акронимы. Чтобы не дать сокращениям сбить вас с толку, в этой статье мы разберём их значения и историю возникновения.

Плавная кнопка "Наверх" на jQuery

Многие из Вас видели, что на некоторых сайтах при прокрутке окна браузера, в какой-то момент появляется кнопка "Наверх". Если по ней кликнуть, то начинается плавная промотка полосы прокрутки до самого верха. Как реализовать плавную кнопку "Наверх" через jQuery, Вы и узнаете из этой статьи.

Youtube несколько видео на странице и стоп проигрывания предыдущего видео.

Youtube несколько видео на странице. Как сделать остановку предыдущего видео, при запуске следующего? На сайте расположено на одной странице три видео. При включении нужно чтобы другое видео, если запущено , останавливалось. Как это реализовать?

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

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

Оформление заявки

Документы на создание сайта

Изучите наше коммерческое предложение, заполните БРИФ и отправьте его на почту maxidebox@list.ru. Изучив все пожелания из БРИФ-а, обратным ответом оповестим Вас по стоимости разработке, ответим на вопросы.

КП на создание сайта Коммерческое предложение на созданеи сайта

Мы берем на себя ответственность за все стадии работы и полностью избавляем клиентов от забот и необходимости вникать в тонкости.

Скачать БРИФ (акета) на создание сайта Скачать БРИФ (акета) на создание сайта

Зополните у БРИФ-а все необходимые поля. Сделайте краткое описание к каждому из пунктов анкеты, привидите примеры в соответсвующий пунктах - это позволит лучше понять Ваши ожидания и требования к сайту