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

Question

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 1

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>

Answer 2

You can use maxlength property in html: See Docs

<input type="number" maxlength="7" />

Use this Pattern for separate numbers

const pattern = new RegExp("(-?[0-9]{3})([0-9]*)");

Accept only integer type

const pattern = new RegExp("[^0-9]", "ig");