我有一个文本类型的输入字段。应该只允许用户在字段中输入数字。如果他们试图输入一个非数字,比如一个字符,它应该被忽略并且不会显示在字段中(并且不会提交给服务器)。我认为我可以使用 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 实现我想要的?
最佳答案
因此,您完全可以通过在输入字段中添加 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);
});
我还会对模型进行一些验证,以防有人绕过 JS。
关于javascript - 使用 HTML5 防止用户在输入文本字段中输入非数字,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44170430/