<input type="tel"> 格式校验宽松且不支持国际区号选择、格式化与国家码映射；intl-tel-input 专注解决国家选择、区号插入、格式化及验证全链路，需引入 utils.js、启用 separateDialCode: true，并用 iti.getNumber(E164) 获取标准化号码。
为什么直接用 <input type="tel"> 不够用
因为浏览器原生的 <input type="tel"> 只校验格式宽松（甚至不校验），完全不处理国际区号选择、格式化、国家码映射这些真实业务必需的功能。用户可能输 +86 138****1234、0086-138****1234 或纯数字 138****1234，后端根本没法统一解析。
用 intl-tel-input 是最省心的落地方案
它不是“又一个 UI 库”，而是专注解决电话输入中「国家选择 + 区号自动插入 + 格式化 + 验证」这一整条链路的成熟方案。注意三点：
- 必须引入
utils.js（单独下载，非 npm 默认包含），否则isValidNumber和格式化功能失效 -
separateDialCode: true要设为true，否则区号会混在输入框里，无法干净提取getSelectedCountryData().dialCode - 初始化后，用
iti.getNumber(intlTelInputUtils.numberFormat.E164)获取标准化号码，别直接读input.value
const input = document.querySelector("#phone");
const iti = window.intlTelInput(input, {
utilsScript: "/path/to/utils.js",
separateDialCode: true,
initialCountry: "cn",
preferredCountries: ["cn", "us", "jp"]
});
手动提取国家码和本地号码时的常见错误
很多开发者以为拿到 iti.getNumber() 就完事了，但后端通常需要拆成两字段：country_code（如 "CN"）和 national_number（如 "13812345678"）。错误做法包括：
- 用
input.value去正则匹配区号——会被用户手动删改破坏结构 - 把
iti.getSelectedCountryData().dialCode当作国家码（这是"+86"，不是"CN"） - 没调用
iti.isValidNumber()就提交，导致getNumber()返回空字符串
正确方式是：先验证，再用 iti.getSelectedCountryData().iso2 拿 ISO 国家码，用 iti.getNumber(intlTelInputUtils.numberFormat.NATIONAL) 拿不含区号的本地号（注意：该值仍含分隔符，需额外 .replace(/\D/g, "") 清洗）。
立即学习“前端免费学习笔记（深入）”；
移动端键盘与光标行为的兼容性坑
在 iOS Safari 上，intl-tel-input 的下拉国家列表常被系统键盘遮挡；Android 部分机型点击区号触发两次 focus，导致光标跳到开头。关键修复点：
- 给容器加
style="z-index: 1000;"，避免被键盘盖住 - 监听
open:countrydropdown事件，手动scrollIntoView({ behavior: "smooth" })到输入框 - 禁用默认 focus 行为：在
focus事件里event.preventDefault()，改用iti.promise.then(() => input.select())控制光标
这些细节不处理，用户在手机上点选国家后输不了号码，问题直接卡在第一步。
