Ограничение ввода отрицательных чисел в 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, поле ввода возвращает последнее валидное значение или очищается при вводе некорректной информации.
Усиление ограничений на ввод
Чтобы избежать вставки отрицательных значений или изменения поля с помощью кнопок, следуйте этим этапам:
Отключите возможность изменения значения полем через колесико мыши или кнопки увеличения/уменьшения:
HTMLСкопировать код<input type="number" min="0" onwheel="this.blur()" onclick="this.blur()">
Настройте пользовательские сообщения валидации для улучшения пользовательского опыта:
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
и другие принципы доступности.
Полезные материалы
<input type="number">
– HTML: HyperText Markup Language | MDN — обзор элементаinput type="number"
, его атрибутов и поведения.- Client-side form validation – Learn web development | MDN — материал по валидации форм на стороне клиента с примерами использования HTML и JavaScript.
- HTML input min Attribute — описание атрибута
min
для ограничения минимального значения при числовом вводе. - oninput Event — информация о событии
oninput
в JavaScript для отслеживания изменений в полях ввода. - Constraint validation – HTML: HyperText Markup Language | MDN — гид по валидации ограничений в HTML, полезно для блокирования ошибочных вводов данных.
- WebAIM: Creating Accessible Forms – Accessible Form Controls — рекомендации по созданию доступных форм и полей ввода.
- Styling Cross-Browser Compatible Range Inputs with CSS | CSS-Tricks — руководство по стилизации элементов формы с помощью CSS, применимое к полям с типом "number".