Иногда мы хотим, чтобы пользователи вводили только числа в текстовый ввод HTML.
В этой статье мы рассмотрим, как ограничить ввод текста HTML, чтобы разрешить только числа.
Просмотр нажатий клавиш
Мы можем наблюдать за нажатиями клавиш, проверяя введенные значения и вставленные данные.
Для этого пишем следующий HTML:
<input type="text" />
И мы можем написать следующий JavaScript:
const input = document.querySelector("input"); input.addEventListener("keypress", (evt) => { const theEvent = evt || window.event; let key = theEvent.keyCode || theEvent.which; key = String.fromCharCode(key); const regex = /[0-9]|\./; if (!regex.test(key)) { theEvent.returnValue = false; if (theEvent.preventDefault) theEvent.preventDefault(); } });
Мы прослушиваем событие keypress
с помощью прослушивателя событий.
В обратном вызове события keypress
мы получаем свойство keyCode
для получения кода.
Затем мы получаем значение нажатой клавиши с помощью String.fromCharCode
.
Затем мы вызываем regex.test
, чтобы проверить, является ли значение ключа цифрой.
Если это не так, то мы вызываем preventDefault()
, чтобы предотвратить добавление символа в строку введенного значения.
Кроме того, мы можем просто удалить все нецифровые символы из строки введенного значения.
Например, мы можем написать:
const input = document.querySelector("input"); input.addEventListener("keyup", (evt) => { input.value = evt.target.value.replace(/[^\d]/, ""); });
Мы получаем введенное значение с помощью evt.target.value
,.
И мы вызываем replace
, чтобы получить все нецифровые символы с пустой строкой.
Затем мы присваиваем возвращенную строку input.value
для обновления введенного значения.
Установите атрибут типа ввода в число
Кроме того, мы можем просто установить для атрибута ввода type
значение number
.
Для этого пишем:
<input type='number' />
Тогда нам не нужно добавлять какой-либо код JavaScript для удаления нецифровых символов из строки введенного значения.
Заключение
Есть несколько способов ограничить значение ввода только цифрами.
Дополнительные материалы на plainenglish.io