Как я могу предотвратить ввод других символов на входе, кроме чисел, использующих 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, или если введен не числовой символ c (но разрешены «Backspace» и «Delete» 'keys):

EDIT: Реализовано предложение 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. Попробуйте изменить свой блокирующий лог c на:

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;
}