如何禁用Mobile Safari中的电话号码链接?

时间:2008-10-22 15:00:45

标签: iphone safari mobile-safari

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

24 个答案:

答案 0 :(得分:670)

根据Safari HTML Reference

,这似乎是正确的做法
<meta name="format-detection" content="telephone=no">

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

以下是Apple开发人员库中的relevant page

答案 1 :(得分:36)

要禁用特定元素的手机解析外观,这个CSS似乎可以解决问题:

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

第一个规则禁用点击,第二个规则负责样式。

答案 2 :(得分:32)

我遇到了同样的问题。我在UIWebView上找到了一个属性,允许您关闭数据检测器。

self.webView.dataDetectorTypes = UIDataDetectorTypeNone;

答案 3 :(得分:27)

添加此内容,我认为这是您正在寻找的内容:

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

答案 4 :(得分:27)

我使用零宽度木匠&zwj;

把它放在电话号码的某个地方,它对我有用。在BrowserStack中测试(和Litmus用于电子邮件)。

答案 5 :(得分:10)

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 ];
}

// ...

来源:Disable Telephone Detection in PhoneGap-iOS

答案 6 :(得分:7)

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

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

答案 7 :(得分:6)

认为我找到了一个解决方案:将数字放在<label>元素中。尚未尝试过任何其他代码,但<div>将其置于主屏幕上,即使使用telephone=no属性也是如此。

从早期的评论中可以明显看出,元标记确实有效,但由于某种原因,在iOS的后续版本中已经破解,至少在某些条件下。我正在运行4.0.1。

答案 8 :(得分:6)

您还可以将<a>标签与javascript: void(0)一起用作href值。

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

答案 9 :(得分:4)

我遇到了同样的问题,但是在iPad网络应用上。

不幸的是,两个......

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

也不是......

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

......工作。

但是,这里有三个丑陋的黑客:

  • 将数字“0”替换为字母“O”
  • 将数字“1”替换为字母“l”
  • 插入无意义的范围:例如,555.5<span>5</span>5.5555

根据您使用的字体,前两个几乎不会引人注意。后者显然涉及多余的代码,但对用户来说是不可见的。

Kludgy肯定会破解,如果你是从数据中动态生成代码,或者你不能以这种方式污染你的数据,那么可能不可行。

但是,足够紧张。

答案 10 :(得分:4)

我有一个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)。

答案 11 :(得分:4)

我的经验与其他人提到的相同。元标记......

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

...当网站在Mobile Safari中运行时(即使用chrome),但在作为webapp运行时停止工作(即,保存到主屏幕并且不使用chrome运行)。

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

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

这不太理想,因为尽管边框设置为无,但iOS会在字段上方呈现一个多像素的灰色条。但是,它比将数字视为链接更好。

答案 12 :(得分:2)

<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纵向/横向组合进行媒体查询

答案 13 :(得分:2)

我自己对此进行了测试,发现虽然它肯定不是一个优雅的解决方案,但它仍然有效。在电话号码中插入空跨度将阻止数据检测器将其转换为链接。

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

答案 14 :(得分:1)

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

答案 15 :(得分:1)

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

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

答案 16 :(得分:1)

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

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

答案 17 :(得分:1)

我对此感到困惑了一段时间,但终于想通了。我们对我们的网站进行了更新,并将一些数字转换为链接,而另一些则没有。事实证明,如果数字位于&lt; fieldset&gt;中,则不会将其转换为链接。对于大多数情况显然不是正确的解决方案,但在某些情况下它将是正确的解决方案。

答案 18 :(得分:1)

另一种选择是用字符替换电话号码中的连字符(U + 2011'Unicode Non-Breaking Hyphen')

答案 19 :(得分:1)

我也有这个问题:Safari和其他移动浏览器会将VAT ID转换为电话号码。所以我想要一个干净的方法来避免单个元素,而不是整个页面(或网站) 我正在分享一个我发现的可能的解决方案,它不是最理想的但仍然非常可行:我把我想要成为tel:链接的数字放在&#8288; HTML实体中是Word-Joiner invisible character。我试图通过将这个char放在某个意义上的位置来保持更多的语义(好吧,至少是某种类型),例如对于增值税ID,我选择根据its format将其放在不同的数字组之间,因此对于我写的意大利增值税:0613605&#8288;048&#8288;8,它在0613605€048之八中呈现,并且不会转换为电话号码。

答案 20 :(得分:0)

将数字分解为单独的文本块

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

答案 21 :(得分:0)

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

如果您只是想删除自动编辑,但保持链接正常工作只需将其添加到您的CSS ...

a[href^=tel] {
 color: inherit;
 text-decoration:inherit;
}

答案 22 :(得分:0)

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

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

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

这非常适合在ios和浏览器上发送HTML电子邮件。

答案 23 :(得分:-11)

另一种解决方案是使用IP号

的图像