title: How to validate KeyboardEvent values for a number input?
body: <p>I am having an input of type number. Chromium browsers seems to restrict the input too, however firefox doesn't and this is a problem (for our product managers).
  So I figured out, why not filtering while having an input via an event like Keydown, Keyup or Keypress.</p>
  <p>I first made this function to filter my input:</p>
  <pre><code>public filterInput(event: KeyboardEvent){
      //ignore all characters that are not numbers, except backspace, delete, left arrow and right arrow
      if ((event.keyCode &lt; 48 || event.keyCode &gt; 57) &amp;&amp; event.keyCode != 8 &amp;&amp; event.keyCode != 46 &amp;&amp; event.keyCode != 37 &amp;&amp; event.keyCode != 39) {
          event.preventDefault();
      }
  }
  </code></pre>
  <p>However I am thinking of generalizing this function and make it something like this</p>
  <pre><code>public filterInput(event: KeyboardEvent, regExPattern: string | RegExp){
      const keyCodesArray: Array&lt;number&gt; = [..., 8, 46, 37, 39]; //get all possible keyCodes in that pattern + allow right/left arrows, backspace and delete
      //check whether keycode is included or not. 
      if (!keyCodesArray.includes(event.keyCode)) {
          event.preventDefault();
      }
  }
  </code></pre>
  <p>After searching and digging into it I came up with such a general function:</p>
  <pre><code>public filterInput(event: KeyboardEvent, regEx: RegExp){
      const restrict = !regEx.test(event.key) &amp;&amp; event.key != &quot;Backspace&quot; &amp;&amp; event.key !== &quot;ArrowLeft&quot; &amp;&amp; event.key !== &quot;ArrowRight&quot; &amp;&amp; event.key !== &quot;Delete&quot;;
      if (restrict){
          event.preventDefault();
      }
  }
  </code></pre>
  <p>My concerns are that the performance might be bad or is there any exceptions I might missing. Also I dont really like the idea of comparing with strings (Backspace, Delete, ArrowLeft and ArrowRight).</p>
  <p>Is there any thinkable but also useful and better way to do this? or should I just stick to my function above.</p>
  <p>Happy to hear your suggestions.</p>