title: How can I prevent other characters from being inputted on an input except numbers using Javascript
body: <p>I am using Vue.JS (Bootstrap-Vue) to build a form, my input has the following code: </p>
  
  <pre><code>&lt;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"
            &gt;&lt;/b-form-input&gt;
  </code></pre>
  
  <p>When a user presses down I want to prevent more than <strong>4 characters</strong> to be entered, this works, but when testing, I can see period and dashes and other similar characters can also be added into the input and ignores the maximum of <strong>4 characters</strong>. How can I update the following code to ensure nothing but numbers can be added to my input on mobile. I'm trying to detect if any of those unwanted keys are pressed then prevent the default action. (I've tested on Android Chrome)</p>
  
  <pre><code>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;
          }
        }
      }
  </code></pre>