如何允許輸入輸入字段編號 1、2 或 3

Question

我有一個 HTML5 輸入表單，它只需要接受數字 1、2 或 3。這不僅僅是允許最小/最大驗證。 表單域不應允許輸入無效字符。

到目前為止，我在下面有這個，它可以工作，但可以使用任意數量。 此外，輸入不得包含 11、12、13、21、22、23、31、32222 等數字。

<input
  type="number"
  id="endLegDarts"
  class="form-control"
  min="1"
  max="3"
  maxlength="1"
  aria-describedby="endDartsHelp"
  oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');"
  required="required"
/>

Answer 1

您可以使用帶有pattern="[1-3]"屬性的簡單 html5 輸入字段來完成：

 input:invalid { border: red solid 3px; }

 <input type="text" name="endLegDarts" pattern="[1-3]" />

好的，這個只允許輸入單個字符“1”、“2”或“3”：

 <input type="number" name="endLegDarts" placeholder="please enter 1, 2 or 3" oninput="this.value=this.value.match(/[1-3]/)">

Answer 2

您應該嘗試使用 div 而不是這樣的輸入：（輸入此代碼段以查看）

 var x = document.getElementById("my-input") window.onkeyup = function(e){ e = e || window.event; if(e.keyCode === 49){ //keycode for 1 x.innerHTML = "1" } else if(e.keyCode == 50){ //keycode for 2 x.innerHTML = "2" } else if(e.keyCode == 51){ //keycode for 3 x.innerHTML = "3" } }

 <span>type here</span> <div id="my-input"></div>