JSFiddle - React, Tailwind, and code Playground

by wj_fiddle_playground

HTML

<h1>JavaScript Masking 5 Numbers Only</h1>

<input class="formInput" type="text" style="width: 200px;" name="myNumber" id="myNumber" value="">

JavaScript

function setInputFilter(textbox, inputFilter) {
  ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
    textbox.addEventListener(event, function() {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      } else {
        this.value = "";
      }
    });
  });
}


setInputFilter(document.getElementById("myNumber"), function(value) {
  return /^\d{9}/.test(value); });