当前位置：文江博客话题详情

Safari iPhone mobile-safari

如何在 Mobile Safari 中禁用电话号码链接？

发布于 2024-10-20 10:31:21 字数 110 浏览 2 评论 0 原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

蓝咒 2024-10-27 10:31:21

根据，这似乎是正确的做法Safari HTML 参考：

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

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

这是相关页面。

This seems to be the right thing to do, according to the Safari HTML Reference:

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

If you disable this but still want telephone links, you can still use the "tel" URI scheme.

Here is the relevant page at Apple's Developer Library.

回复收藏 0 原文

孤檠 2024-10-27 10:31:21

我使用零宽度连接符 ‍

只需将其放在电话号码中的某个位置即可。在 BrowserStack（以及用于电子邮件的 Litmus）中进行了测试。

回复收藏 0 原文

守不住的情 2024-10-27 10:31:21

要禁用特定元素的电话解析外观，此 CSS 似乎可以解决问题：

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

第一个规则禁用单击，第二个规则负责样式。

To disable the phone parsing appearance for specific elements, this CSS seems to do the trick:

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

The first rule disables the click, the second takes care of the styling.

回复收藏 0 原文

风为裳 2024-10-27 10:31:21

添加这个，我想这就是你正在寻找的：

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

Add this, I think it is what you're looking for:

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

回复收藏 0 原文

栩栩如生 2024-10-27 10:31:21

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

self.webView.dataDetectorTypes = UIDataDetectorTypeNone;

I was having the same problem. I found a property on the UIWebView that allows you to turn off the data detectors.

self.webView.dataDetectorTypes = UIDataDetectorTypeNone;

回复收藏 0 原文

垂暮老矣 2024-10-27 10:31:21

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 中的电话检测。

Solution for Webview!

For PhoneGap-iPhone / PhoneGap-iOS applications, you can disable telephone number detection by adding the following to your project’s application delegate:

// ...

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

    return [ super webViewDidStartLoad:theWebView ];
}

// ...

source: Disable Telephone Detection in PhoneGap-iOS.

回复收藏 0 原文

护你周全 2024-10-27 10:31:21

要在页面的一部分上禁用电话号码检测，请将受影响的文本包含在带有 href="#" 的锚标记中。如果您这样做，移动 Safari 和 UIWebView 应该不理会它。

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

To disable phone number detection on part of a page, wrap the affected text in an anchor tag with href="#". If you do this, mobile Safari and UIWebView should leave it alone.

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

回复收藏 0 原文

成熟稳重的好男人 2024-10-27 10:31:21

您还可以使用标签，将 javascript: void(0) 作为 href 值。

示例如下：
+44 456 77 89 87

回复收藏 0 原文

苹果你个爱泡泡 2024-10-27 10:31:21

我想我已经找到了解决方案：将数字放入元素中。尚未尝试过任何其他标签，但

使其在主屏幕上保持活动状态，即使使用 telephone=no 属性也是如此。

从之前的评论中可以明显看出，元标签确实有效，但由于某种原因，在更高版本的 iOS 下（至少在某些情况下）已经失效了。我正在运行4.0.1。

回复收藏 0 原文

樱＆纷飞 2024-10-27 10:31:21

我的经历和其他一些人提到的一样。元标记...

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

...当网站在 Mobile Safari（即使用 Chrome）中运行时工作，但在作为 Web 应用程序运行时停止工作（即保存到主屏幕并在不使用 Chrome 的情况下运行）。

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

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

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

My experience is the same as some others mentioned. The meta tag...

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

...works when the website is running in Mobile Safari (i.e., with chrome) but stops working when run as a webapp (i.e., is saved to home screen and runs without chrome).

My less-than-ideal solution is to insert the values into input fields...

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

It's less than ideal because, despite the border being set to none, iOS renders a multi-pixel gray bar above the field. But, it's better than seeing the number as a link.

回复收藏 0 原文

请恋爱 2024-10-27 10:31:21

我自己对此进行了测试，发现它确实有效，尽管它肯定不是一个优雅的解决方案。在电话号码中插入空白范围将阻止数据检测器将其转换为链接。

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

I have tested this myself and found that it works although it is certainly not an elegant solution. Inserting an empty span in the phone number will prevent the data detectors from turning it into a link.

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

回复收藏 0 原文

空名 2024-10-27 10:31:21

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

I had an ABN (Australian Business Number) that iPad Safari insisted on turning into a phone number link. None of the suggestions helped. My solution was to put img tags between the numbers.

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

The class exists only to document what the img tags are for.

Works on iPad 1 (4.3.1) and iPad 2 (4.3.3).

回复收藏 0 原文

一张白纸 2024-10-27 10:31:21

不适用于电子邮件：如果您正在准备的 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 纵向/横向组合进行媒体查询

<meta name = "format-detection" content = "telephone=no"> does not work for emails: if the HTML you are preparing is for an email, the metatag will be ignored.

If what you are targeting are emails, here's yet another ugly-but-works solution for ya'll:

Example of some HTML you want to avoid being linked or auto formatted:

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

And the CSS that will make the magic happen:

@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";}
}

The drawback: you may need a media query for each of the ipad/iphone portrait/landscape combos

回复收藏 0 原文

痴情 2024-10-27 10:31:21

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

Phone: 1-800<span>-</span>620<span>-</span>3803

A trick I use that works on more than just Mobile Safari is to use HTML escape codes and a little mark-up in the phone number. This makes it more difficult for the browser to "identify" a phone number, i.e.

Phone: 1-800<span>-</span>620<span>-</span>3803

回复收藏 0 原文

新人笑 2024-10-27 10:31:21

添加元标记来关闭格式检测对我来说不起作用。我试图在

标签中显示 Zoom 会议 ID 以及其他文本，iOS 将该 ID 转换为电话链接。此外，我通过 a[href^="tel:"] 定位电话链接，以便为它们提供自定义样式，因此禁用电话链接上的样式不是一个选项。

我找到的解决方案是将 ID 号包装在 标记中。这似乎可以防止 iOS 搞乱它。

回复收藏 0 原文

没有心的人 2024-10-27 10:31:21

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

0 = 0
9 = 9

You could try encoding them as HTML entities:

0 = 0
9 = 9

回复收藏 0 原文

临风闻羌笛 2024-10-27 10:31:21

我也遇到了同样的问题，但是是在 iPad 网络应用程序上。

不幸的是，无论是……

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

还是

0 = 0
9 = 9

……都不起作用。

但是，这里有三个丑陋的黑客：

用字母“O”替换数字“0”
用字母“l”替换数字“1”
插入无意义的跨度：例如，555.55 ;5.5555

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

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

但是，在紧要关头足够了。

I had the same problem, but on an iPad web app.

Unfortunately, neither...

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

nor ...

0 = 0
9 = 9

... worked.

But, here's three ugly hacks:

replacing the number "0" with the letter "O"
replacing the number "1" with the letter "l"
insert a meaningless span: e.g., 555.5<span>5</span>5.5555

Depending on the font you use, the first two are barely noticeable. The latter obviously involves superfluous code, but is invisible to the user.

Kludgy hacks for sure, and probably not viable if you're generating your code dynamically from data, or if you can't pollute your data this way.

But, sufficient in a pinch.

回复收藏 0 原文

吃不饱 2024-10-27 10:31:21

Sencha Touch 应用程序中的相同问题通过应用程序的 index.html 中的元标记 () 解决。

回复收藏 0 原文

剑心龙吟 2024-10-27 10:31:21

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

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

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

这非常适合 iOS 和浏览器上的 HTML 电子邮件。

This answer trumps everything as of 6-13-2012:

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

Change the color to whatever matches your text, text decoration removes the underline, pointer events stops it from being viewed like a link in a browser (pointer doesn't change to a hand)

This is perfect for HTML emails on ios and browser.

回复收藏 0 原文

野鹿林 2024-10-27 10:31:21

为什么你想删除链接，它使得这个选项非常用户友好。

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

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

Why would you want to remove the linking, it makes it very user friendly to have th eoption.

If you simply want to remove the auto editing, but keep the link working just add this into your CSS...

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

回复收藏 0 原文

神经大条 2024-10-27 10:31:21

我也遇到这个问题：Safari 和其他移动浏览器将增值税 ID 转换为电话号码。所以我想要一个干净的方法来避免它出现在单个元素上，而不是整个页面（或网站）上。
我正在分享我发现的一个可能的解决方案，它不是最理想的，但仍然非常可行：我在我不想成为 tel: 链接的号码中放入 & ;#8288; HTML 实体，即 Word-Joiner 不可见字符。我试图通过将此字符放在某个有意义的位置来保持更多语义（嗯，至少是一种），例如对于增值税 ID，我选择根据其格式因此，对于意大利增值税，我写道：0613605⁠048⁠8它以 0613605⁠048⁠8 呈现，并且未转换为电话号码。

回复收藏 0 原文

沙与沫 2024-10-27 10:31:21

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

回复收藏 0 原文

梦里寻她 2024-10-27 10:31:21

我确实为此困惑了一段时间，但最终想通了。我们对网站进行了更新，并将一些数字转换为链接，而另一些则没有。事实证明，如果数字位于

中，则不会将其转换为链接。显然，对于大多数情况来说这不是正确的解决方案，但在某些情况下它是正确的。

回复收藏 0 原文

洒一地阳光 2024-10-27 10:31:21

对于 WKWebView，相当于 none 的 Swift 如下：

wkWebView.configuration.dataDetectorTypes  = []

For WKWebView, the Swift equivalent to none is the following:

wkWebView.configuration.dataDetectorTypes  = []

回复收藏 0 原文

没有心的人 2024-10-27 10:31:21

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

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

Break the number down into separate blocks of text

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

回复收藏 0 原文

~没有更多了~

关于作者

街道布景

暂无简介

0 文章

0 评论

22 人气

关注发私信

友情链接

文江博客

如何在 Mobile Safari 中禁用电话号码链接？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（25）

Webview的解决方案！

Solution for Webview!

关于作者

相关话题

热门标签

推荐作者

lorenzathorton8

Zero

萧瑟寒风

mylayout

tkewei

17818769742

友情链接

如何在 Mobile Safari 中禁用电话号码链接？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（25）

Webview的解决方案！

Solution for Webview!

关于作者

相关话题

热门标签

推荐作者

lorenzathorton8

Zero

萧瑟寒风

mylayout

tkewei

17818769742

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。