Question

我有一个text类型的输入字段。只允许用户在字段中输入数字。如果他们尝试输入非数字，如字符，则应忽略它并且不在字段中显示（并且不提交给服务器）。我以为我可以使用HTML5模式属性实现这一点：

<input class="form-control" data-remote="true" data-url="/contacts" data-method="put" pattern="^[0-9]*$" type="text" value="123456" name="contact[phone]" id="contact_phone">

但它并没有像预期的那样发挥作用。我仍然可以在场上输入任何角色。这里没有表单提交按钮。一旦他们跳出字段，就会进行ajax调用。

如何用html5实现我想要的目标？

Answer 1

因此，您可以通过将type="number"添加到输入字段Here's a quick codepen来完全实现这一目标。

我建议使用一些正则表达式和一些JS来评估输入，然后用允许的字符替换输入。

var phone_input = document.getElementById('contact_phone');

function validDigits(n){
  return n.replace(/[^0-9]+/g, '');
}

phone_input.addEventListener('keyup', function(){
  var field = phone_input.value;
  phone_input.value = validDigits(field);
});

我还会对模型进行一些验证，以防万一有人绕过JS。

Answer 2

我认为它不能使用普通的html5，因为在您提交表单后模式会生效（它会使验证失败）。但由于您已经在使用js，因此您可以使用jQuery.keypress()函数来执行此操作。

阻止用户使用HTML5在输入文本字段中输入非数字

2 个答案: