Ограничение ввода в HTML input: только числа

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

Чтобы элемент <input> принимал только числовые данные, воспользуйтесь атрибутом type="number". Возможно также использовать числовой шаблон с pattern:

<input type="number">
<input type="text" pattern="\d*">

Эти атрибуты ограничивают возможность вводить текстовые данные. Атрибут type="number" выводит спиннер для облегчения ввода чисел.

Если требуется поддержка старых браузеров, полезной окажется библиотека number-polyfill с GitHub, эмулирующая поведение type="number".

Глубже в HTML5

Как применять type="number"

Атрибут type="number" для <input>, представленный в HTML5, позволяет создавать поля для ввода числовых данных.

Совет: Тип number надежно защищает ваши данные от текстового ввода!

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

Использование атрибута pattern

Атрибут pattern предназначен для работы со старыми версиями HTML и позволяет ограничивать ввод с помощью регулярных выражений:

<input type="text" pattern="[0-9]*" title="Допускаются только числа">

Дополнительная защита с помощью JavaScript: обработка нажатий клавиш

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

function isNumberKey(evt) {
  var charCode = (evt.which) ? evt.which : evt.keyCode;
  return !(charCode > 31 && (charCode < 48 || charCode > 57));
}

Эта функция следует связать с полем ввода:

<input type="text" onkeypress="return isNumberKey(event)">

Таким образом, мы фильтруем ввод данных в реальном времени.

Интересный факт: ASCII-коды от 48 до 57 соответствуют цифрам от 0 до 9.

Работа с десятичными числами и сложными числовыми значениями

Чтобы обеспечить поддержку десятичных чисел, функцию в JavaScript нужно дополнить проверкой на точку и запятую:

function isNumberOrDecimal(evt) {
  var charCode = (evt.which) ? evt.which : evt.keyCode;
  
  if (charCode == 46 || charCode == 44) {
    if (this.value.indexOf('.') >= 0 || this.value.indexOf(',') >= 0) {
      return false; // Запрещаем дублировать символы
    }
    return true;
  }
  return isNumberKey(evt); // Делегируем основную функцию
}

Факт: ASCII-коды 46 и 44 обозначают точку и запятую соответственно.

JavaScript и jQuery для надёжной валидации

Простота с jQuery

jQuery позволяет эффективно фильтровать числовые вводы:

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

Реальность работы со старыми doctypes

Для старых doctypes type="number" и pattern могут быть недоступны, здесь на помощь придёт комплексное использование JavaScript и jQuery.

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

Представьте цифровой замок сейфа, работающий только с числами:

[ Экран Замка ]
Введите код: _ _ _ _ _

Поле для ввода числового кода использует следующий HTML-тег:

<input type="number" name="safeCombination" />

Пользователей встретит числовая клавиатура:

[Числовая Клавиатура]
[1][2][3]
[4][5][6]
[7][8][9]
[0]

Примечание: <input type="number"> гарантирует корректный ввод только чисел и улучшает взаимодействие с мобильными устройствами.

Старые браузеры: такая вот веселуха

Для старых браузеров, которые не поддерживают type="number", рекомендуется использовать number-polyfill:

<!--[if lt IE 9]>
  <script src="путь/к/number-polyfill.js"></script>
<![endif]-->

Информация: IE 9 и более ранние версии не поддерживают type="number".

Распространённые ошибки и методы устранения

Существуют обходные пути ограничения на ввод только чисел:

1. Копирование и вставка текста: добавьте обработчик для onpaste.
2. Автозаполнение форм: валидируйте введенные значения с помощью JavaScript перед отправкой.
3. Использование стрелок для увеличения/уменьшения числа: примените CSS для улучшения визуального восприятия в разных браузерах.

Углубленное изучение: дополнительные ресурсы

Стандарты HTML и материалы по валидаторам чисел в разделе "Полезные материалы" помогут выработать углубленное понимание работы HTML5 и JavaScript.

JSFiddle представляет собой платформу для экспериментов и доработок.

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

1. <input>: Элемент Ввода (Form Input) – HTML: HyperText Markup Language | MDN — Подробное руководство по элементу <input>.
2. HTML input type Attribute — Справочник типов ввода для <input>.
3. HTML5Pattern — Коллекция шаблонов для HTML5-полей ввода.
4. javascript – HTML text input allow only numeric input – Stack Overflow — Обсуждение методов ограничения ввода только числами.
5. Numeric Inputs – A Comparison of Browser Defaults | CSS-Tricks — Сравнение подходов различных браузеров к обработке численных полей ввода.
6. HTML Standard — Детальное описание типа ввода number в HTML.
7. numeric validator – FormValidation — Руководство по валидации числовых данных в формах с использованием JavaScript.