如何防止使用Javascript在输入中输入除数字以外的其他字符

Question

我正在使用Vue.JS（Bootstrap-Vue）构建表单，我的输入有以下代码：

<b-form-input
            v-mask="'####'"
            number
            type="number"
            no-wheel
            pattern="[0-9]"
            step="1"
            :class="{ 'hasError': $v.form.dobYear.$error }"
            v-model.number="$v.form.dobYear.$model"
            class="form-input"
            name="year"
            id="year"
            maxlength="4"
            min="1900"
            max="2020"
            @keydown="filterKey"
          ></b-form-input>

当用户按下时，我想阻止输入超过 4 个字符，这是可行的，但是在测试时，我可以看到句号和破折号以及其他类似的字符也可以添加到输入并忽略最多 4 个字符。如何更新以下代码以确保只能将数字添加到我在移动设备上的输入中。我正在尝试检测是否按下了任何不需要的键，然后阻止默认操作。 （我在 Android Chrome 上测试过）

filterKey(e) {
      const value = e.target.value;
      const key = e.key;
      console.log(value, this.amount);
      if (String(value).length === 4) {
        //check if a number is pressed after 4 have been entered
        if (!isNaN(Number(key))) {
          e.preventDefault();
          return;
        } else if (key == 190 || key == 189 || key == 107 || key == 69) {
          e.preventDefault();
          return;
        }
      }
    }

Answer 1

如果输入值的长度已经是 4，或者如果键入了非数字字符（但允许“退格”和“删除”，则以下 sn-p 将不允许在输入元素中输入任何内容键）：

编辑：如果在输入元素中选择了某些文本，则实施了 Hiws 的建议，即使长度为 4，也让用户输入数字

function filterKey(e) {
    let previousValue = e.target.value;
    let key = e.keyCode || e.charCode;
    if (key != 8 && key != 46) { // Ignore backspace and delete
        if (
            // preventDefault if length of input is 4 and no text is selected in the input
            ( String(e.target.value).length >= 4 && e.target.selectionStart === e.target.selectionEnd ) ||
            // preventDefault if entered a space or non-number
            !e.key.trim() || isNaN(e.key)
            ) {
            // Prevent input if input length crosses 4,
            // or if input is not a number
            e.preventDefault();
            // Include below line only if you have no other event listeners on the element, or its parents
            e.stopImmediatePropagation();
            return;
        }
    }

}

Answer 2

仅当数字值已经等于 4 时，才阻止数字以外的键。尝试将您的阻塞逻辑更改为：

if (String(value).length > 4 || !isNaN(Number(key)) || unwanted keyCodes) {
   e.preventDefault();
   return;

Answer 3

您可以使用正则表达式来测试输入字段的值，避免弄乱 keyCodes。

if ( !/^[0-9]{0,4}$/.test(String(value)) ) {
    e.preventDefault();
    return;
}