Question

可能使用JavaScript。

<input type="number"  size="2" min="1" max="2">

即使设置了最小值和最大值，您仍然可以输入您想要的任何数字，它将接受该值。如何在这种情况下限制用户，使他们只能输入1或2，如果他们输入不同的内容，则会发送警报并清除该字段，以便用户可以重试。

Answer 1

不使用JS，您可以设置pattern字段的input属性，以便用户至少知道他/她放入的内容无效。但是，这不会清除该领域。

DEMO

<强> HTML

<input type="number" size="2" min="1" max="2" pattern="[12]">

<强> CSS

input:invalid { color:red; border:2px solid red; }

Answer 2

为简单起见，我在您的输入中添加id：

<input type="number" id="myInput" size="2" min="1" max="2">

然后我们可以简单地添加一个事件监听器：

document.querySelector('#myInput').addEventListener('input', function(e) {
  if (e.target.value !== '1' && e.target.value !== '2') {
    alert('Invalid number!');
    e.target.value = '';
    e.preventDefault();
  }
});

JSFiddle example

请记住，使用alert非常刺激用户体验，我只是在这里使用它作为一个例子。相反，您可能希望向元素添加error类或弹出模态。

Answer 3

如果您不介意在无效输入上输入标准错误消息，您还可以使用：

<input type="text" pattern="[1-2]">

编辑：如果您添加＆＃34;标题＆＃34;属性为输入，您可以设置所需的错误消息。

Answer 4

示例使用HTML 5 input type number，并非所有浏览器都支持一致。

您可以使用JavaScript限制此范围，也许使用jQuery。这绝对是对上述代码的改进，但实际上在实际应用程序中，您可以通过使用AngularJS，Knockout或jQuery Validator等框架组件来实现此目的。使用这样的框架将允许您在中心位置管理所有验证，并实现涉及多个属性的更复杂的逻辑，例如“值2必须大于值1”。

Answer 5

您可以使用输入的jQuery和checkValidity()方法：

$('[name=points]').bind('keyup',function(){
  if (!$(this).get(0).checkValidity()) {
    $(this).val('');
  }
});

checkValidity()仅适用于现代浏览器。

演示：http://www.bootply.com/125666

Answer 6

这就是预期<input type=number>的工作原理：它不会在物理上阻止用户输入任意数据（好吧，它可能，但它不需要），但控件不满足表单提交时的约束，如果它不符合要求。

如果您想让用户仅在两个选项之间进行选择，请使用复选框或两个单选按钮，或使用带有两个选项的select元素。详细信息取决于这是强制性选择还是可选择以及是否存在默认值。

P.S。在这个问题上，W3schools.com也是假的。您链接到的示例（与您的代码不同）并非严格错误，只是不合逻辑和误导。

JavaScript输入类型编号限制为值1和2

6 个答案: