Иногда мы хотим, чтобы пользователи вводили только числа в текстовый ввод 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