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

• type="tel"属于原生设计行为：HTML规范中该类型输入框的核心作用是语义标识当前字段为电话号码，仅会在移动端访问时唤起数字键盘，本身没有内置输入拦截逻辑，允许输入任意字符，并非默认限制仅输入数字。
• pattern属性仅作用于表单提交校验：你代码中配置的正则规则只会在所属表单提交时触发校验，不符合规则时会抛出浏览器默认提示，但不会在用户输入过程中实时过滤不符合要求的字符。

如果需要实现实时限制仅能输入数字和连字符，可给输入框增加输入事件处理逻辑，参考修改后的代码：

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

上述代码会在每次输入时自动过滤掉所有非数字、非连字符的内容，满足输入限制需求的同时还保留了原有的提交校验逻辑。

内容的提问来源于stack exchange，提问作者Brendo。