实现 HTML 输入电话掩码 XXX-XXX-XXXX

Question

我想输入自动格式化的美国电话号码。换句话说，当一个人正在打字时，光标会自动前进到下一部分并且不允许超过掩码。

我不想使用任何表单提交。并且想简单地用输入属性来做。

是这样的：

 <input name="phoneVal" type="text" placeholder="XXX-XXX-XXXX" required>

我已经在许多网站上看到过这个实现，但我不知道该怎么做。我一直在寻找几个小时。我想我没有输入正确的搜索问题。

原文由 FAYSS 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 HTML 5 pattern 属性定义一个正则表达式来限制输入

<input name="phoneVal" type="text" placeholder="XXX-XXX-XXXX" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required />

参考： https ://www.w3schools.com/tags/att_input_pattern.asp

原文由 Ralph Ritoch 发布，翻译遵循 CC BY-SA 4.0 许可协议