Ограничение ввода только цифрами в HTML с jQuery

Быстрый ответ

Если вы хотите сделать поле, которое принимает только цифровой ввод, вы можете воспользоваться методом keydown() в jQuery. Зарегистрировать придется коды для цифр и основных управляющих клавиш, таких как backspace и стрелки навигации. Код представлен ниже:

$('input[type="text"]').keydown(function(e) {
    // Числа и управляющие клавиши: backspace, delete, стрелки – особенные гости на вечеринке чисел!
    var validKeys = [8, 9, 13, 27, 35, 36, 37, 38, 39, 40, 46, 48, 57, 96, 105];
    var isCommand = e.metaKey || e.ctrlKey;
    var isNumber = (e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105);

    if ($.inArray(e.keyCode, validKeys) !== -1 || isCommand || isNumber)
        return; // Разрешить ввод
    e.preventDefault(); // Запретить нажатие нечисловых клавиш
});

Просто примените этот код к вашему полю input, и тот в свою очередь предотвратит обработку нечисловых клавиш, позволяя при этом базовую навигацию.

Учет edge case’ов

Ввод десятичных чисел и комбинаций с управляющими клавишами

В некоторых случаях числа могут принимать не только вид целых чисел. Чтобы разрешить ввод десятичных чисел, добавьте коды для клавиш 110 и 190:

$('input[type="text"]').keydown(function(e) {
    var validKeys = [8, 9, 13, 27, 35, 36, 37, 38, 39, 40, 46, 48, 57, 96, 105, 110, 190];
    // ...оставшаяся логика будет такой же, как в предыдущем примере...
});

Также учтите значение ctrlKey для горячих клавиш, чтобы обеспечить качественный пользовательский опыт:

$('input[type="text"]').keydown(function(e) {
    // ...validKeys будет такой же, как выше...
    var ctrlCmdKeys = [65, 67, 86, 88]; // A, C, V, X для Ctrl+A, Ctrl+C, Ctrl+V, Ctrl+X
    
    if (e.ctrlKey && ctrlCmdKeys.includes(e.keyCode)) {
        return; // Разрешить действия с буфером обмена
    }
    // ...оставшаяся логика будет такой же, как в предыдущем примере...
});

Подробнее об этом расскажет наш спикер на видео

Объединение клиентской и серверной валидации

Валидация на клиентской стороне безусловно полезна, но для повышения безопасности обязательно следует проводить валидацию на серверной стороне, поскольку клиентские скрипты могут быть изменены:

app.post('/data/submit', function(req, res) {
    var numericInput = req.body.numericField;
    if (/^\d+$/.test(numericInput)) {
        // Продолжить работу с безопасным числовым вводом
    } else {
        // Обработать ввод, который не соответствует условиям
        res.status(400).send('Неверный ввод');
    }
});

Устранение проблем на мобильных устройствах

HTML5 number inputs могут вести себя по-разному в зависимости от мобильного браузера. Обратите внимание на потенциальные трудности связанные с атрибутами step, min, max и виртуальным клавиатурой:

<input type="text" name="numberField" pattern="\d*" /> <!-- Применяем числовую клавиатуру для iOS -->

Визуализация

Давайте представим поле для ввода в виде охранника (🚪👮‍♂️), который пропускает только цифры (0-9):

       ___________
      |  ПОЛЕ     |
      |  ВВОДА🚪  |
🚶‍♂️🚶‍♀️🚶‍♂️🚶‍♀️🚶‍♂️🚶‍♀️🚶‍♂️
🔢🔢🚶‍♀️🚶‍♂️🔢🚶‍♀️🔢🚶‍♂️🔢🔢🔢🚶‍♀️🔢
      👮‍♂️ "СТОП!
    Пропускаем только
        цифры!"

А вот и реализация представления с использованием jQuery:

$('input').on('input', function() {
  this.value = this.value.replace(/[^0-9]/g, '');
});

Деликатные обратная связь

Использование эстетических стилей для невалидных вводов

Чтобы привлекать внимание пользователей к ошибкам, примените класс input-error, когда ввод не соответствует числовым значениям. Настраивайте его в соответствии со стилью вашего сайта:

$('input').on('input', function() {
  if (!/^\d*$/.test(this.value)) {
    $(this).addClass('input-error'); // Добавьте класс при ошибке
  } else {
    $(this).removeClass('input-error'); // Уберите класс, если ошибка исправлена
  }
});

Добавьте внешний вид классу .input-error в вашем CSS:

.input-error {
    border-color: red;
    background-color: #ffcccc;
}

Контроль за положением курсора

Позаботьтесь о том, чтобы положение курсора и выборка пользователя оставались без изменений в процессе ограничения ввода:

$('input').on('input', function() {
    var start = this.selectionStart;
    var end = this.selectionEnd;
    this.value = this.value.replace(/[^0-9]/g, '');
    this.setSelectionRange(start, end);
});

Полезные материалы

1. Событие keypress | jQuery API Documentation — Подробное описание обработки числового ввода с помощью метода .keypress() в официальной документации jQuery.
2. HTML-текстовый ввод позволяет ввод только числовых значений – Stack Overflow — Практический обзор способов ограничения числового ввода на Stack Overflow.
3. <input type="number"> – HTML: HyperText Markup Language | MDN — Подробное руководство по использованию input type='number' в HTML для числового ввода от MDN.
4. Событие keydown | jQuery API Documentation — Описание метода .keydown(), используемого для валидации числового ввода, в официальной документации jQuery.
5. Документация Inputmask — Этот ресурс предлагает плагин jQuery для создания масок ввода, облегчающих работу с числовым вводом.
6. Обработка событий | jQuery Learning Center — Учебный ресурс от jQuery, который поможет вам глубже понять работу событий.
7. HTML атрибут pattern у input — Учебник от W3Schools, в котором объясняется использование атрибута pattern в HTML для управления вводом в формы.