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

Question

我有一个文本类型的输入字段。 只允许用户在字段中输入数字。 如果他们尝试输入非数字，如字符，则应忽略它并且不在字段中显示（并且不提交给服务器）。 我以为我可以用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"来完全做到这一点， 它可以在大多数浏览器中使用 。

我建议使用一些正则表达式和一些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()函数。