为什么 input[type='tel'] 允许输入非数字字符？答案

【问题标题】：Why does input[type='tel'] allow non-numerical characters to be entered?为什么 input[type='tel'] 允许输入非数字字符？
【发布时间】：2021-09-25 19:38:15
【问题描述】：

为什么输入框允许输入字母而不限制输入数字？

&lt;input type="tel" id="phone" name="phone_number" placeholder="555-555-5555" pattern="\d{3}-\d{3}-\d{4}"&gt;

【问题讨论】：

type=tel 仅用于在支持的设备和浏览器上调出小键盘。它不对用户输入执行任何验证/限制
可能是国家代码 (+44) 和区号 (444) 语法。
It's all explained in the documentation.

标签： javascript html validation input

【解决方案1】：

因为许多国家/地区在电话号码中使用字符，例如 '+-()' 空格等。

【讨论】：

【解决方案2】：

它不限制可以输入的字符类型，但是如果输入的值与你的模式不匹配，浏览器会阻止提交。

如果您不想允许某些字符输入，您可以使用 JavaScript 删除这些字符：onkeyup="this.value = this.value.replace(/[^0-9-]/g, '');"。

input:invalid {
    color: red;
}

<form>
    <input type="tel" id="phone" name="phone_number" placeholder="555-555-5555" pattern="\d{3}-\d{3}-\d{4}" onkeyup="this.value = this.value.replace(/[^0-9-]/g, '');">
    <input type="submit" value="Submit">
</form>

【讨论】：

【解决方案3】：

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel

Andy 的文档链接有我正在寻找的答案。

在提交表单之前，输入值不会自动验证为特定格式，因为世界各地的电话号码格式差异很大

【讨论】：