input type="number" 為 3 位數字或 8 位數字

Question

是否可以限制用戶可以進入字段的位數。 例如

• 僅適用於 3 位數字 184
• 僅適用於 8 位數字 18875264

Answer 1

HTML5 為input標簽pattern引入了一個新屬性。 您可以將正則表達式指定為模式屬性的值以驗證輸入。

pattern不適用於type="number"所以我將使用type="text"代替。 type="tel"也可以使用，但除非您真的想輸入電話號碼，否則不要使用它。

 <form> <label for="num-input">3 or 8 digit number: </label> <input id="num-input" type="text" required pattern="\\d{3}|\\d{8}" title="must be 3 or 8 digit"/> <br/> <input type="submit" value="submit" /> </form>

正則表達式\\d{3}|\\d{8}匹配 3 位數字或 8 位數字。

Answer 2

將其限制為三位數的最基本的純 HTML 方法是：

<input type="number" max="999" min="-999" />

但是，當用戶手動輸入值而不是使用輸入的添加或減去按鈕時，這不會強制使用max或min屬性。 要驗證這一點，您需要添加一些檢查用戶輸入的 javascript：

document.querySelector('input[max], input[min]').onblur = function (event) {
  const numValue = Number(event.target.value);
  // if within the expected range, do nothing
  if (numValue  < event.target.max && numValue  > event.target.min) return;
  // check if it's closer to max than to min,
  // then set the value to max or min accordingly
  event.target.value = event.target.max - numValue  < event.target.min - numValue  ?
    event.target.max :
    event.target.min;
}

更新

經過進一步檢查，我意識到我誤解了這個問題。

為了只允許三或八位數字，您可以使用以下驗證：

 document.querySelector('input').onblur = function (event) { let valString = Number(event.target.value).toString(); if (valString.length === 3 || valString.length === 8) return; event.target.value = valString.length > 8 ? valString.substr(0, 8) : (valString.length > 3 ? valString.substr(0, 3) : null); }

 <input type="number" />

這會將任何超過 8 位數字的值修剪為 8 位，將任何超過 3 位但短於 8 位數字的值修剪為 3 位，如果輸入 1 位或 2 位數字值，則將其保留為空白。