Как ограничить ввод HTML числовыми значениями: методы и примеры

Чтобы ограничить ввод HTML числовыми значениями, вы можете использовать несколько методов. Вот несколько вариантов:

  1. Использование типа ввода «число». Вы можете использовать тип ввода HTML5 «число», чтобы создать поле ввода, которое принимает только числовые значения. Этот тип ввода будет отображать цифровую клавиатуру на мобильных устройствах и не позволит пользователям вводить нецифровые символы.
<input type="number" name="quantity" min="0" max="100" step="1">

Атрибуты min, maxи stepявляются необязательными и позволяют вам определить диапазон и приращение числовых значений.

p>

  1. Использование обработки событий JavaScript. Вы можете использовать JavaScript для проверки ввода по мере ввода пользователем. Вот пример использования события JavaScript oninput:
<input type="text" oninput="this.value = this.value.replace(/[^0-9]/g, '')">

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

  1. Использование JavaScript и регулярных выражений. Другой подход — использовать JavaScript и регулярные выражения для проверки ввода при отправке формы. Вот пример:
<form onsubmit="return validateForm()">
  <input type="text" id="numericInput">
  <input type="submit" value="Submit">
</form>
<script>
  function validateForm() {
    var input = document.getElementById("numericInput").value;
    var pattern = /^[0-9]+$/;
    if (!pattern.test(input)) {
      alert("Please enter a numeric value.");
      return false;
    }
    return true;
  }
</script>

Этот код использует шаблон регулярного выражения (/^[0-9]+$/) для проверки того, что ввод состоит только из числовых символов. Если введенные данные не являются числовыми, отображается предупреждающее сообщение и отправка формы блокируется.