Ограничение ввода чисел до целых в HTML5 и jQuery

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

Для создания HTML-поля ввода, предназначенного исключительно для целых чисел, используйте тип number с атрибутом step="1".

Пример:

<input type="number" step="1">

Такое поле будет настроено на ввод целых чисел и предотвратит ввод десятичных. Для усиления точности проверки подключите атрибут pattern с регулярным выражением.

Использование положительных целых чисел с помощью атрибута pattern

Если вам нужно, чтобы input принимал только положительные целые числа, установите его тип как "text" и добавьте атрибут pattern с регулярным выражением \d+.

Пример кода:

<input type="text" pattern="\d+" title="Только положительные целые числа">

Регулярное выражение \d+ разрешает ввод только цифр, отсеивая все другие символы. С помощью атрибута title можно предоставить пользователю подсказку об ограничениях ввода для этого поля.

JavaScript для немедленной очистки поля от ненужных символов

Если вам нужно, чтобы поле ввода принимало исключительно числа, следуйте этим шагам:

1. Установите для input тип "text".
2. Привяжите к событию oninput JavaScript-функцию для контроля ввода.

Код HTML:

<input type="text" id="integerOnly" oninput="integerValidation(this)">

Код JavaScript:

function integerValidation(element) {
  // Удаление всех символов, не являющихся числами
  element.value = element.value.replace(/[^\d]+/g, '');
}

Скрипт JavaScript удалит все нечисловые символы при вводе, обеспечивая тем самым мгновенную валидацию.

Будьте внимательны к различиям в поведении браузеров

Помните, что браузеры могут по-разному обрабатывать атрибуты input. Несмотря на поддержку HTML5-атрибутов валидации, таких как pattern, многими современными браузерами, всегда проверяйте функционирование форм в различных окружениях с помощью кросс-браузерного тестирования.

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

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

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

Подсказки и рекомендации по валидации ввода

Разъяснение атрибута step

Полагаться на step="1", чтобы исключить ввод десятичных чисел, нельзя полностью, так как некоторые браузеры могут его проигнорировать, хотя и не позволят отправить форму, пока значение не будет корректировано до целого числа.

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

Сила регулярных выражений

Regex — это надежный инструмент валидации. В данном случае регулярное выражение \d+ разрешает вводить только числа, игнорируя знаки препинания.

Используйте встроенные возможности, когда это возможно...

Валидация с помощью встроенных инструментов HTML5 обычно делает код более чистым. Меньше JavaScript — меньше нагрузка на браузер и меньше вероятность ошибок.

... Но не забывайте о JavaScript

В то же время, JavaScript позволяет сделать работу с формой более интерактивной, предоставляя обратную связь в режиме реального времени и значительно улучшая пользовательский опыт.

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

1. <input>: Элемент ввода (формы) – HTML: HyperText Markup Language | MDN — Подробное руководство по элементу HTML <input>.
2. Атрибут pattern для HTML input — Примеры использования pattern для ограничения вводимых данных только целыми числами.
3. Клиентская валидация форм – Изучение веб-разработки | MDN — Все аспекты клиентской валидации форм, которые вам необходимо знать.
4. Запрет ввода нечисловых символов в поле ввода HTML – Stack Overflow — Использование JavaScript для ограничения ввода только числами в поле input.
5. Типы HTML input — Обширное руководство по типам HTML input.
6. Лучшие практики дизайна мобильных форм — Smashing Magazine — Рассмотрение лучших практик дизайна форм от ведущих разработчиков.
7. Пользовательский опыт при использовании валидации форм на HTML и CSS | CSS-Tricks — Исследование UX при использовании валидации форм в HTML.