Как запретить ввод в инпут чисел и даже если кто-то скопирует текст с какого -то файла (допустим ворда?

Question

Как запретить ввод в инпут букв и даже если кто-то скопирует текст с какого -то файла (допустим ворда? тоесть разрешить только числа

Answer 1

Можно отлавливать ввод в инпут и проверять на цифры.

Также отлавливать событие буфера обмена и так же проверять на соответствие цифрам.

const isDigits = (v) => /^[0-9]+$/.test(v);


const handlerChangeInput = (e) => {
  if (!isDigits(e.key)) {
    e.preventDefault();
  }
}


const handlerPasteInput = (e) => {
  e.preventDefault();
  const clipboardData = e.clipboardData.getData('text').trim();
  if (isDigits(clipboardData)) {
    e.target.value = clipboardData;
  }
}

const bindDigitsEvents = (input) => {
  input.addEventListener('keypress', handlerChangeInput);
  input.addEventListener('paste', handlerPasteInput);
};

const input = document.getElementById('numberInput');

bindDigitsEvents(input);

<input id="numberInput" type="text">

P.S Данный код работает только с целыми числами. Чтобы он работал с дробными нужно изменить регулярное выражение

Answer 2

Не пробовал делать такие валидации. Такой вариант подходит?

const input = document.querySelector('input');

input.addEventListener('input', (evt) => {
  input.value = getOnlyNumbers(input.value);
});

function getOnlyNumbers (string) {
  let newString = '';
  for (let i = 0; i < string.length; i++) {
    if ( +string[i] ) newString += string[i];
  }
  return newString;
}

<input type="text">

БЛОГ НА HUSL

Как запретить ввод в инпут чисел и даже если кто-то скопирует текст с какого -то файла (допустим ворда?

Ответы (2 шт):