Javascript：僅允許輸入 7 位數字，並且僅在第三個數字后自動添加連字符 (-)

Question

我想通過以下方式限制輸入字段。

• 總是 000-0000 格式
• 在有 3 位數字后立即自動插入“-”不要讓用戶添加 -
• 不要讓用戶輸入超過 7 位數字
• 不接受 integer 以外的其他

我試過的

在輸入字段的 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 + "-";
   }
},

這段代碼有什么作用？

它不允許用戶添加除數字/數字以外的任何內容，也不允許在第 3 位之后插入連字符 (-)，但一旦用戶輸入第 4 位，連字符 (-) 就會被替換。

Answer 1

您可以使用兩個輸入。 拿這個評論的例子（更新以允許復制粘貼）：

 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

您可以在 html 中使用maxlength屬性：請參閱文檔

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

將此模式用於separate numbers

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

only integer型

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