I want to restrict the input field in the following manner.
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.
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—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>