iPhone手机下，会把一定长度的数字转为拨号问题

问题的发生

今天在修复一个Bug，iPhone下的支付页，点“支付”按钮没有反应，在安卓下不会出现这样的问题。

我第一时间想到是不是事件绑定的问题，排查过后发现并不是。然后我想到是不是传给后台的数据不正确，导致不能执行回调函数。于是我将发起ajax请求的数据，都打印了一遍，发现了问题的所在，传给后台的电话不是我所预想的一串数字，而是一个<a>标签。

问题发生的原因

网上查了查资料，发现这是因为iPhone手机下，会把一定长度的数字转为拨号标签，然后当点击数字的时候就会提示你是否拨号。

比如这是原来的html代码：

<span id="payPhone">13333333333</span>

在iPhone下，就会变成：

<span id="payPhone">
  <a dir="ltr" href="tel:13333333333" x-apple-data-detectors="true" x-apple-data-detectors-type="telephone" x-apple-data-detectors-result="1">13333333333</a>
</span>

问题的解决

在HTML页面加上一个<meta>标签：

<meta content="telephone=no" name="format-detection" />

这样在页面点击电话号码既不会提示拨号，也不会出现bug了。

format-detection

<meta name="format-detection" />标签是告诉浏览器是否将特定格式的文本或数字自动转成带有特定属性和行为的<a>标签。

除了电话号码外，邮箱、地址和日期等都可能被识别到，如果你想关闭，你可以这样设置：

<meta content="telephone=no,email=no,address=no,date=no" name="format-detection" />

• ← Previous Post
• Next Post →