javascript - 如何防止无效输入

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，结果 不会更新。如何确保输入忽略无效输入和/或恢复到最后一个有效值？

Answer 1

您可以保存对最后一个有效值的引用，并在放入无效内容时插入它:

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>