Ограничение ввода отрицательных чисел в HTML input

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

Чтобы <input type="number"> принимал только положительные числа, воспользуйтесь атрибутом min со значением 0. Далее добавьте слушатель событий JavaScript для блокировки клавиши «минус».

Пример кода:

<input type="number" min="0" onkeydown="return event.key !== '-';">

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

Гарантирование положительного числового ввода

Для автоматического преобразования введённых отрицательных значений в положительные, используйте обработчик события oninput с функцией Math.abs:

<input type="number" min="0" oninput="this.value = Math.abs(this.value)">

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

Ввод только числовых символов

Ограничьте ввод только цифрами при помощи события onkeypress. Это позволит контролировать функциональные клавиши, такие как Backspace или стрелки:

<input type="number" onkeypress="return (event.charCode >= 48 && event.charCode <= 57) || event.charCode === 8 || event.charCode === 0">

С данным кодом ввод числовых данных с основной клавиатуры и с клавиатуры Numpad будет безопасным.

Блокировка нерелевантных клавиш

Расширьте метод onkeypress, добавив обработчик onkeydown для предотвращения использования неподходящих клавиш:

<input type="number" onkeydown="return (event.keyCode > 47 && event.keyCode < 58) || (event.keyCode > 95 && event.keyCode < 106) || event.keyCode === 8">

Такой подход обеспечит сохранность данных от случайного ввода неподходящих символов.

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

Ограничение ввода отрицательных чисел в поле input type="number" может быть представлено через аналогию с ограничением роста для посещения аттракциона:

Ваше числовое поле ввода — это аттракцион:

🎢🚫🔽 **ВХОД ОТРИЦАТЕЛЬНЫМ ЗАПРЕЩЁН!** 🚫🔽🎢

Мы настраиваем поле так, чтобы отрицательные числа не пропускались:

<input type="number" min="0" oninput="this.value = Math.max(this.value, 0)">

Вот результат:

До: [🎢, -2, 3, -1, 4]
После:  [🎢,  0, 3,  0, 4]

✨ Теперь в поле input разрешены только положительные значения и ноль, все отрицательные отклонены! ✨

Использование validity.valid для грамотной валидации

Для корректировки ввода отрицательных значений можно воспользоваться validity.valid или очистить поле value, задав его значение равное пустой строке '', в случае невалидных данных:

<input type="number" min="0" oninput="this.validity.valid||(this.value='');">

Благодаря валидации форм HTML5, поле ввода возвращает последнее валидное значение или очищается при вводе некорректной информации.

Усиление ограничений на ввод

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

1. Отключите возможность изменения значения полем через колесико мыши или кнопки увеличения/уменьшения:

   HTML

   Скопировать код

   <input type="number" min="0" onwheel="this.blur()" onclick="this.blur()">

2. Настройте пользовательские сообщения валидации для улучшения пользовательского опыта:

   JS

   Скопировать код

   var numberInput = document.querySelector('input[type="number"]');
   numberInput.oninvalid = function(ev){
     ev.target.setCustomValidity('Please enter a positive number.');
   };
   numberInput.oninput = function(ev){
     ev.target.setCustomValidity('');
   };

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

Фокусируемся на доступности и производительности

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

Обеспечьте ясность индикаторов ошибок и добавьте тексты-замещения для программ чтения с экрана, используя метки aria и другие принципы доступности.

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

1. <input type="number"> – HTML: HyperText Markup Language | MDN — обзор элемента input type="number", его атрибутов и поведения.
2. Client-side form validation – Learn web development | MDN — материал по валидации форм на стороне клиента с примерами использования HTML и JavaScript.
3. HTML input min Attribute — описание атрибута min для ограничения минимального значения при числовом вводе.
4. oninput Event — информация о событии oninput в JavaScript для отслеживания изменений в полях ввода.
5. Constraint validation – HTML: HyperText Markup Language | MDN — гид по валидации ограничений в HTML, полезно для блокирования ошибочных вводов данных.
6. WebAIM: Creating Accessible Forms – Accessible Form Controls — рекомендации по созданию доступных форм и полей ввода.
7. Styling Cross-Browser Compatible Range Inputs with CSS | CSS-Tricks — руководство по стилизации элементов формы с помощью CSS, применимое к полям с типом "number".