Ограничение ввода число без десятичных: HTML5 и JS

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

Чтобы элемент <input> принимал исключительно целые числа, присвойте атрибуту step значение 1 и отсекайте десятичные части, применяя событие oninput:

<input type="number" step="1" oninput="this.value = ~~this.value;">

Таким образом, поле ввода будет принимать только целочисленные значения, отсеивая десятичные.

Давайте заглянем глубже

Простая блокировка ненужных символов — это первый уровень защиты от ввода десятичных чисел. Битовый оператор JavaScript ~~ работает аналогично функции trunc(), удаляя дробную часть числа. Рассмотрим более сложные методы решения этой задачи.

Установка шаблона для числового ввода

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

<input type="number" pattern="\d+" title="Только целые числа">

Здесь pattern="\d+" допускает ввод только цифр, а title предоставляет пользователю подсказку: "Пожалуйста, вводите только целые числа!"

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

Блокировка десятичных значений

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

function preventDecimalInput(e) {
  // если нажата точка — отменяем ввод
  return !(e.key === '.');
}

<input type="number" onkeydown="return preventDecimalInput(event)">

Таким образом, мы вроде бы говорим пользователю: "Тут точка не к месту!"

Подсказка при вводе пользователя

Чёткая и своевременная обратная связь — ключевой элемент интуитивного интерфейса. Можно использовать JavaScript-функции для валидации, которые немедленно корректируют введённые данные или предоставляют правила ввода в случае попытки внести десятичные значения.

Учитываем доступность

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

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

Вот визуальный пример исключения десятичных значений из ввода с использованием такого HTML-кода:

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

С помощью атрибута step="1" мы направляем пользователя к целочисленному вводу и не оставляем возможности для ввода десятичных значений.

Умные подходы к употреблению

Фильтрация ввода "на лету" может вызвать сомнения. Убедитесь, что это не оказывает негативное влияние на пользователей и не делает интерфейс неприятным в использовании. Оптимальный пользовательский интерфейс должен быть элегантным и прозрачным, как идеально отточенный механизм.

Обработка сценариев вставки данных

Функция onpaste довольно часто остаётся без внимания. Глубоко продуманное решение должно учитывать все детали. Убедитесь, что при вставке данных также удаляются все неподходящие символы:

function cleanOnPaste(e) {
  e.preventDefault();
  var text = (e.originalEvent || e).clipboardData.getData('text/plain');
  document.execCommand('insertText', false, text.replace(/\D/g, ''));
}

<input type="number" onpaste="cleanOnPaste(event)">

Теперь при вставке учитываются только целые числа!

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

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

<input type="number" oninput="this.value = this.value.replace(/[^\d-]/g, '');">

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

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

1. Элемент ввода <input> – детальное руководство по использованию элемента ввода.
2. Атрибут type="number" – описание возможностей и особенностей использования данного типа ввода.
3. Дискуссии и вопросы о возможности блокировки ввода десятичных значений в HTML5.
4. Совместимость с различными браузерами для элемента input[type=number].
5. Регулярные выражения в JavaScript – обучение на основе примеров решения разнообразных задач валидации данных в формах.