Методы замены символов и разрешения только чисел в текстовом поле: примеры JavaScript

Вот пример функции JavaScript, которая заменяет символы в текстовом поле и допускает только цифры:

Метод 1: использование JavaScript с регулярными выражениями

function replaceAndAllowOnlyNumbers(input) {
  var sanitizedInput = input.value.replace(/[^0-9]/g, '');
  input.value = sanitizedInput;
}

В этом методе функция replaceAndAllowOnlyNumbersпринимает входной элемент в качестве параметра. Он использует метод replaceс регулярным выражением для замены любого символа, не являющегося числом (представленного [^0-9]), пустой строкой. Результирующему очищенному вводу затем присваивается значение входного элемента.

Метод 2. Использование jQuery

$(document).ready(function() {
  $('#textbox').on('input', function() {
    var sanitizedInput = $(this).val().replace(/[^0-9]/g, '');
    $(this).val(sanitizedInput);
  });
});

В этом методе мы используем jQuery для подключения прослушивателя событий к текстовому полю с идентификатором «textbox». Всякий раз, когда запускается событие ввода (например, когда пользователь вводит или вставляет текст), функция выполняется. Для замены нечисловых символов пустой строкой используется та же логика, что и в предыдущем методе.

Метод 3. Использование типа ввода HTML5 и атрибута шаблона

<input type="text" pattern="[0-9]*" oninput="this.value = this.value.replace(/[^0-9]/g, '')">

В этом методе мы используем тип ввода HTML5 и атрибут шаблона. Установив тип «текст» и атрибут шаблона «[0-9]*», мы указываем, что разрешен только числовой ввод. Событие oninputиспользуется для вызова встроенного кода JavaScript, который заменяет нечисловые символы пустой строкой.