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

我有一个文本类型的输入字段。用户只能在该字段中输入数字。如果他们试图输入一个非数字字符，它应该被忽略并且不显示在字段中（并且未提交给服务器）。我认为我可以通过HTML5模式属性实现此目的：防止用户在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？

来源

2017-05-25 Donato

防止输入字符是不友好的，只是显示一条警告消息，指出内容无效，在通过检查之前不提交数据。例如。人们可能会复制并粘贴包含无效字符的数据，并打算将其编辑出来。最常见的是BSB号码，几乎总是写成“000-999”，但输入只需要像“000999”这样的数字。为什么不让我粘贴“012-345”，然后让我删除短跑？ – RobG

您是否在寻找'type =“number”' –

所以，你可以通过在输入字段It'll work in most browsers中添加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); 
});

Here's a quick codepen

我还放一点验证的型号，以防万一有人绕过JS。

来源

2017-05-25 00:46:33

oops，刚刚得知您可以通过在输入中添加'type =“number”'来实现。但是，我猜这是你的另一种选择！ –

嘿@donato，介意接受我的回答？ –

我认为它不会与纯html5工作，因为该模式在提交表单后会影响（它会使验证失败）。但是因为您已经在使用js，所以您可以使用例如jQuery.keypress()函数。

来源

2017-05-25 00:39:17

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

回答

相关问题