Javascript: Only allow 7 digits for input and automatically add hyphen(-) after only 3rd number

I want to restrict the input field in the following manner.

• always 000-0000 format
• auto insert “-” right after having 3 digits don’t let user to add –
• don’t let a user type more than 7 digits
• do not accept other than integer

What I have tried

On keyup event of input field I am calling keyUpValidation method

keyUpValidation(event) {
   let value = event.target.value;
   document.getElementById('input').value = value.replace(/[^0-9]/g, "").replace(/(..*?)..*/g, "$1");
   if (value.length == 3) {
    document.getElementById('input').value = value + "-";
   }
},

What does this code do?

It doesn’t allow the user to add anything other than digit/number also insert hyphen (-) after the 3rd digit but as soon as the user inputs the 4th digit the hyphen(-) is getting replaced.

Answer

You can use two inputs. Take this commented example (updated to allow copy-pasting ease):

const wrapper = document.getElementById("wrapper"),
  p1 = document.getElementById("p1"),
  dash = document.getElementById("dash"),
  p2 = document.getElementById("p2");

p1.addEventListener("input", e => {
  // if length is 3
  if (p1.value.length >= 3) {
    e.preventDefault(); // prevent extra text from being added
    dash.style.visibility = "visible"; // show dash
    p2.removeAttribute("disabled"); // remove disabled
    let remainingValues = p1.value.slice(3); // get next four values
    p1.value = p1.value.substring(0, 3);
    p1.setAttribute("disabled", "true");
    p2.value = remainingValues.substring(0, 4); // set value for next element; limit to 4; enhance copy-pasting as users will likely copy-paste
    if (p2.value.length === 4) {
      p2.setAttribute("disabled", "true");
      const userInput = p1.value + p2.value; // done
      done(userInput);
    }
    p2.focus(); // focus
  }
});
p2.addEventListener("input", e => {
  if (p2.value.length >= 4) {
    p2.setAttribute("disabled", "true"); // disable to prevent extra text
    const userInput = p1.value + p2.value; // done
    done(userInput);
  }
});

wrapper.addEventListener("click", e => {
  p1.focus(); // emulate input focus
});
// uncomment to autofocus:
// p1.focus();

function done(val) {
  console.log(val);
}

/*some styles to make the wrapper look like an input*/

#wrapper {
  border: 1px solid lightgray;
  border-radius: 3px;
  padding: 5px 10px;
  width: fit-content;
  transition: .2s;
}

#wrapper:focus-within {
  border: 1px solid gray;
}

#wrapper,
#wrapper * {
  cursor: text;
}

input[type="number"] {
  outline: none;
  border: none;
  background-color: transparent;
  -moz-appearance: textfield;
}


/*remove the step button on numbers*/

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

#dash {
  visibility: hidden;
}

#p1 {
  width: 25px;
}

#p2 {
  width: 30px;
}

<p>Test copy-paste&mdash;copy: 1234567</p>
<!--using a wrapper div to emulate an input-->
<div id="wrapper">
  <input type="number" id="p1" />
  <span id="dash">-</span>
  <input type="number" id="p2" disabled />
</div>