javascript - 使用 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" 来做到这一点，It'll work in most browsers .

我建议使用某种正则表达式和一些 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);
});

Here's a quick codepen

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