可靠的 html5 输入类型处理

Question

我知道 html5 输入标签有一个 pattern 属性，但这有助于在用户输入值之后验证字段。

这里的请求是prevent用户输入错误，而不是之后更正。我没有兴趣讨论它是否更好 - 这只是请求。

我也知道我可以为keyPress 事件添加一个事件侦听器并决定接受哪些字符。

但是我看到的所有示例都不是跨浏览器兼容的（我至少对桌面版和移动版的 FF、Chrome 感兴趣）并且它们失败了，因为用户可以输入“----”或“ ......”。

什么是可靠、健壮、跨浏览器的正则表达式模式以允许用户键入：

• 任何数字 [0..9]
• 只有一个小数点（'.' 或 ',' 转换为第一个小数点）
• 指定的小数位数（即小数点后的数字）
• 可选的只有一个符号（“+”或“-”）作为第一个字符
• 常用文本命令：箭头键、复制/剪切/粘贴、退格、删除、回车

最好不使用jQuery - 因为我应该只为这个目标添加它。

Answer 1

“这里的请求是为了阻止用户”——不要那样做。

如果我在输入我的名字，但是在输入 i 时我的手指滑了，我也按了 8 键...没什么大不了的，我只是按退格键对吧？

嗯，你的想法是错误的。您的姓名输入将禁止数字，因此不会出现意外的 8，而退格键将删除 i。

在您的问题中，您似乎正在寻找数字输入（您是否考虑过<input type="number" />？），因此在尝试输入 9 时，手指滑动可能适用于 * 键。无论您输入什么，都适用相同的想法。

始终允许用户键入他们想要的任何内容。当他们完成输入（元素的onchange或表单的onsubmit）时，然后你告诉他们“嘿，你输入的这个东西没有看起来是对的。”

因此，支持input[pattern]的浏览器提供的行为是正确的，不应改变。