如何禁用手机号码链接在移动Safari?

iPhone上的Safari会自动为出现在电话号码中的数字字符串创建链接。我正在编写一个包含IP地址的网页,Safari将其转换为电话号码链接。是否可以为整个页面或页面上的某个元素禁用此行为?

305281 次浏览

你可以尝试将它们编码为HTML实体:

0 = 0
9 = 9

加上这个,我想这就是你想要的:

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

根据Safari HTML参考,这似乎是正确的事情:

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

如果您禁用了此功能,但仍然需要电话链接,则仍然可以使用“tel”URI方案。

下面是苹果开发者库中的相关页面

我想我已经找到了一个解决方案:把数字放在<label>元素内。还没有尝试任何其他标签,但<div>使它在主屏幕上处于活动状态,即使有telephone=no属性。

从之前的评论中可以明显看出,元标签确实起作用了,但由于某种原因,在iOS的后续版本中,至少在某些条件下,它已经失效了。我运行的是4.0.1。

我也有同样的问题。我在UIWebView中找到了一个属性,它允许你关闭数据检测器。

self.webView.dataDetectorTypes = UIDataDetectorTypeNone;

我也遇到了同样的问题,不过是在iPad网页应用上。

不幸的是,既不……

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

也不……

&#48; = 0
&#57; = 9

... 工作。

但是,这里有三个丑陋的技巧:

  • 用字母“O”代替数字“0”
  • 用字母“l”代替数字“1”
  • 插入一个无意义的span:例如,555.5<span>5</span>5.5555

取决于你使用的字体,前两个几乎不明显。后者显然包含多余的代码,但对用户是不可见的。

这当然是拙劣的技巧,如果您从数据动态生成代码,或者如果您不能以这种方式污染数据,那么这可能是不可行的。

但在紧要关头,这已经足够了。

我有一个ABN(澳大利亚商业号码),iPad Safari坚持要把它变成一个电话号码链接。这些建议都没用。我的解决方案是在数字之间加上img标签。

ABN 98<img class="PreventSafariFromTurningIntoLink" /> 009<img /> 675<img /> 709

该类的存在只是为了记录img标记的用途。

适用于iPad 1(4.3.1)和iPad 2(4.3.3)。

要在页面的某些部分禁用电话号码检测,请使用href="#"将受影响的文本包装在锚定标记中。如果你这样做,移动Safari和UIWebView应该不去管它。

<a href="#"> 1234567 </a>

我的经历和其他人提到的一样。元标签…

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

...当网站运行在移动Safari(即,chrome),但停止工作时,运行作为一个网络应用程序(即,被保存到主屏幕和运行没有chrome)。

我不太理想的解决方案是将值插入输入字段…

<input type="text" readonly="readonly" style="border:none;" value="3105551212">

这不是很理想,因为尽管边界被设置为none, iOS在字段上方呈现一个多像素的灰色条。但是,这比把数字看作一个链接要好。

Webview解决方案!

对于PhoneGap-iPhone / PhoneGap-iOS应用程序,您可以通过在项目的应用程序委托中添加以下内容来禁用电话号码检测:

// ...


- (void)webViewDidStartLoad:(UIWebView *)theWebView
{
// disable telephone detection, basically <meta name="format-detection" content="telephone=no" />
theWebView.dataDetectorTypes = UIDataDetectorTypeAll ^ UIDataDetectorTypePhoneNumber;


return [ super webViewDidStartLoad:theWebView ];
}


// ...

来源:禁用PhoneGap-iOS中的电话检测

Sencha Touch应用中同样的问题用index.html中的元标签(<meta name="format-detection" content="telephone=no">)解决了。

<meta name = "format-detection" content = "telephone=no">不适用于电子邮件:如果你正在准备的HTML是一封电子邮件,元标签将被忽略。

如果你的目标是电子邮件,这里还有一个丑陋但有效的解决方案:

一些你想避免链接或自动格式化的HTML的例子:

will cease operations <span class='ios-avoid-format'>on June 1,
2012</span><span></span>.

和CSS,将使魔术发生:

@media only screen and (device-width: 768px) and (orientation:portrait){
span.ios-date{display:none;}
span.ios-date + span:after{content:"on June 1, 2012";}
}

缺点:你可能需要对ipad/iphone的每一个纵向/横向组合进行媒体查询

截至2012年6月13日,这个答案胜过一切:

<a href="#" style="color: #666666;
text-decoration: none;
pointer-events: none;">
Boca Raton, FL 33487
</a>

将颜色更改为与文本匹配的颜色,文本装饰删除下划线,指针事件阻止它像浏览器中的链接一样被查看(指针不会更改为手)

这是完美的HTML电子邮件在ios和浏览器。

我自己测试过,发现它是有效的,尽管它肯定不是一个优雅的解决方案。在电话号码中插入空span将防止数据检测器将其转换为链接。

(604) 555<span></span> -4321

要禁用特定元素的电话解析外观,下面的CSS似乎可以做到:

.element { pointer-events: none; }
.element > a { text-decoration:none; color:inherit; }

第一条规则禁止单击,第二条规则负责样式化。

我使用的一个不仅适用于Mobile Safari的技巧是使用HTML转义码和在电话号码中添加一点标记。这使得浏览器更难“识别”一个电话号码。

Phone: 1-8&#48;&#48;<span>-</span>62&#48;<span>-</span>38&#48;3

为什么要删除链接,这使得它非常用户友好的选择。

如果你只是想删除自动编辑,但保持链接工作,只需添加到您的CSS…

a[href^=tel] {
color: inherit;
text-decoration:inherit;
}
我也有这个问题:Safari和其他移动浏览器将增值税id转换为电话号码。所以我想要一个干净的方法来避免它在单个元素上,而不是整个页面(或网站) 我正在分享我发现的一个可能的解决方案,它是次优的,但仍然是相当可行的:我把,在我不想成为tel:链接的数字,&#8288; HTML实体,即字工匠无形的字符。我试图通过将这个char放在一些有意义的地方来保持更多的语义(好吧,至少是某种意义上的),例如,对于增值税ID,我选择根据它的格式将它放在不同的数字组之间,因此对于意大利增值税,我写了:0613605&#8288;048&#8288;8,它在0613605⁠048⁠8中呈现,并且它没有转换为电话号码

你也可以使用带有javascript: void(0)作为href值的<a>标签。

示例:
<a href="javascript: void(0)">+44 456 77 89 87</a> . 0

我使用一个零宽度的joiner &zwj;

把这句话放在电话号码里就行了。在BrowserStack(和Litmus用于电子邮件)中测试。

另一种选择是用字符 (U+2011“Unicode非断续连字符”)取代你电话号码中的连字符。

有一段时间我真的很困惑,但最终明白了。我们对网站进行了更新,有些数字转换为链接,有些则没有。事实证明,如果数字在<fieldset>中,它们将不会被转换为链接。显然不是大多数情况下的正确解决方案,但在某些情况下是正确的。

将数字分解成不同的文本块

301 <div style="display:inline-block">441</div> 3909

添加元标记来关闭格式检测对我来说不起作用。我试图在<p>标签中显示一个缩放会议ID以及其他文本,iOS将该ID转换为电话链接。此外,我通过a[href^="tel:"]针对电话链接,以便给他们自定义样式,因此禁用电话链接上的样式不是一个选项。

我找到的解决方案是用<code>标记包装ID号。这似乎可以防止iOS干扰它。