Как предотвратить неверный ввод

Question

let el = document.querySelector('#input');

el.onkeyup = function(e) {
  if (e.target.willValidate && !e.target.validity.valid) {
    // invalid
    e.preventDefault();
  }
};

el.oninput = function(e) {
  result.innerHTML = e.target.value;
};

<input type="number" min="0" max="10" id="input">
<span id="result"></span>

Поэтому, если я введу или вставлю недопустимое значение, например 11, result не обновится. Как я могу гарантировать, что ввод просто игнорирует неверный ввод и / или возвращается к последнему действительному значению?

Answer 1

Вот обходной путь, использующий событие onpaste. Но он принимает значения min и max, а затем пытается проверить значение вручную. Но это предотвратит изменение входного значения при вставке неправильных значений.

let el = document.querySelector('#input');


el.onpaste = function(e){
  var pastedVal = (e.originalEvent || e).clipboardData.getData('text/plain');
  if(pastedVal < parseInt(el.getAttribute("min")) || pastedVal > parseInt(el.getAttribute("max"))){
    e.preventDefault();
  }
};

<input type="number" min="0" max="10" id="input">
<span id="result"></span>

Answer 2

Вы можете сохранить ссылку на последнее действительное значение и вставить ее, когда в поле введено что-то недопустимое:

let el = document.querySelector('#input');

let lastVal;
el.oninput = function(e) {
  if (this.willValidate && !this.validity.valid) {
    this.value = lastVal;
  } else {
    lastVal = el.value;
    result.innerHTML = e.target.value;
  }
};

<input type="number" min="0" max="10" id="input">
<span id="result"></span>

Это также может быть сделано путем перехвата всех методов, которые приводят к изменениям ввода, выяснения, каким будет новое значение, путем проверки индекса выбора и того, что заново добавляются следующие значения (и, возможно, удаление старых разделов текста, если они были выбраны), а затем использование preventDefault, чтобы вообще не вводить недопустимый текст, но это было бы намного сложнее для практически одинакового результата. .

Пример фрагмента в Vue с использованием того же метода:

var app = new Vue({
  el: '#app',
  data: {
    val: '',
    oldVal: ''
  },
  watch: {
    val(newVal) {
      if (!(newVal >= 1 && newVal <= 10)) {
        this.val = this.oldVal;
      } else {
        this.oldVal = newVal;
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input v-model="val">
  <span>{{ val }}</span>
</div>