Anchor标签tel协议下0开头号码拨号首位0被省略解决方案咨询

问题原因 #

部分设备的系统拨号器解析tel:协议时，会默认将号码开头的0识别为国内长途前缀，在没有匹配到完整国家码规则的场景下会自动剔除前导0，属于系统层的解析逻辑，和a标签本身的写法无关。

可行解决方法 #

• 方案1：使用E.164标准格式书写号码
  给号码补全对应国家/地区的国际区号，例如中国大陆地区的号码前缀为+86，原本的0开头固话去掉区号前的0后拼接国家码即可，修改后代码如下：

  <a href="tel:+862882550270">02882550270</a>
  

  这种写法符合国际号码规范，所有设备的拨号器都能正常解析，不会出现丢数字的问题，跨地区拨打也不会出错，是优先推荐的方案。
• 方案2：强制拨号器原样解析号码
  如果业务场景必须保留拨号时号码前的0，可以给号码包裹编码后的双引号，强制拨号器不做规则处理直接拨号，修改后代码如下：

  <a href="tel:%2202882550270%22">02882550270</a>
  

  其中%22是双引号的URL编码，大部分安卓、iOS设备的原生拨号器都支持这种写法，会保留号码的全部字符原样拨打。
• 方案3：webview嵌套场景主动触发拨号
  如果你的页面是嵌套在App webview、小程序web-view等环境中，可监听标签的点击事件，阻止默认跳转后调用宿主环境提供的拨号API，完全规避系统对tel:协议的默认解析逻辑，示例代码如下：

  document.querySelector('a[href^="tel:"]').addEventListener('click', e => {
    e.preventDefault()
    const phone = e.target.textContent.trim()
    // 按宿主环境要求调用对应拨号接口即可
  })
  

关于外部库 #

这个问题属于系统拨号规则适配问题，不需要引入任何外部库即可解决，额外引入库反而会增加项目的冗余体积。

内容的提问来源于stack exchange，提问作者Pushprajsinh Chudasama