如何防止其他字符输入到使用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，或者键入了非数字字符，以下代码段将不允许在输入元素中输入任何内容（但允许使用'Backspace'和'Delete'键）：

编辑：已实施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;
}