Предотвратить вставку неправильных значений в тип числа ввода - PullRequest
Новая
       43

Предотвратить вставку неправильных значений в тип числа ввода

0 голосов
/ 14 февраля 2019

У меня есть элемент Input с type = "number", который должен принимать только 0,1, .., 9 и "."По умолчанию вы также можете записать +, - и другие символы, которые я предотвращаю с помощью EventListener «keydown» и keyCodes.Это работает нормально.

Но как я могу предотвратить вставку или перетаскивание пользователем какого-либо другого материала на вход?Я пытался проверить input.value, но на самом деле он дает мне "", когда это недопустимое число.Есть ли способ увидеть, что пользователь хочет вставить, прежде чем вставить?

Я также знаю, что я мог бы изменить тип на «текст», но пока что это не вариант.

Спасибо.

Ответы [ 5 ]

0 голосов
/ 14 февраля 2019

без JavaScript 

:invalid {
  color: red
}
<form method="post" action="https://httpbin.org/post">
  <input type="number" name="num" pattern="[0-9]*[.,]?[0-9]+" min="0" step="any">
  <!-- you won't be able to submit when the form is invalid -->
  <input type="submit">
</form>

PS (браузер позаботится о нормализации , до .)

0 голосов
/ 14 февраля 2019

Я противопоставил что-то подобное, я использовал регулярное выражение для фильтрации введенного значения любых символов, принимает только цифры.обратной стороной этого решения является то, что оно принимает только целые числа, а не числовые.Вот пример кода: 

handleChange = (e) => {
    const re = /^[0-9\b]+$/;
    if (e.target.value === '' || re.test(e.target.value)) {
         this.setState({Number: e.target.value})
      }
  }

Я использую реагирование для этого примера, но, конечно, вы можете настроить код в соответствии с вашими целями

0 голосов
/ 14 февраля 2019

Используйте это:

Позволяет использовать любой тип входного фильтра для текста, включая различные числовые фильтры.Это будет правильно обрабатывать Copy + Paste, Drag + Drop, сочетания клавиш, операции контекстного меню, не типизируемые клавиши и все раскладки клавиатуры. 

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}
<input name="someid" onkeypress="return isNumberKey(event)"/>
0 голосов
/ 14 февраля 2019

Если вы хотите отклонить любой ввод, кроме 0-9 и ., попробуйте это: 

Array.from(document.getElementsByClassName('restricted')).forEach(elem => {
  elem.addEventListener('input', event => {
    event.target.value = event.target.value.replace(/[^0-9\.]/g, '');
  });
});
<input type="text" class="restricted">

Вы можете добавить .restricted к любому входу, чтобы достичь того же эффекта, как только этот скрипт будет на месте.К сожалению, этот прием не работает с input[type="number"], потому что event.target.value равен '' всякий раз, когда обнаруживается недопустимое состояние ввода.

0 голосов
/ 14 февраля 2019

попробуйте это событие:

Вставка:

https://developer.mozilla.org/en-US/docs/Web/Events/paste

Перетаскивание:

https://developer.mozilla.org/en-US/docs/Web/Events/drag

возможно посмотрите наэто:

Как сделать управляющие символы программно в Javascript?

РЕДАКТИРОВАТЬ: 

document.getElementById('id').addEventListener('paste', (e) => {
  let pre = e.target.value;
  window.setTimeout(() => {
    console.log(pre);
    console.log(e.target.value);
    /*
    Get the pasted value here, and edit the input
    */
  });
});
...