如何允许输入输入字段编号 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>