[英]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.我想通过以下方式限制输入字段。
What I have tried我试过的
On keyup event of input field I am calling keyUpValidation method在输入字段的 keyup 事件上,我正在调用 keyUpValidation 方法
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.它不允许用户添加除数字/数字以外的任何内容,也不允许在第 3 位之后插入连字符 (-),但一旦用户输入第 4 位,连字符 (-) 就会被替换。
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>
You can use maxlength
property in html: See Docs您可以在 html 中使用maxlength
属性:请参阅文档
<input type="number" maxlength="7" />
Use this Pattern for separate numbers
将此模式用于separate numbers
const pattern = new RegExp("(-?[0-9]{3})([0-9]*)");
Accept only integer
type only integer
型
const pattern = new RegExp("[^0-9]", "ig");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.