驯服Windows 10 Edge浏览器中的自动电话号码功能

31

即使系统上没有安装电话应用程序,Windows 10的Edge浏览器似乎也能检测电话号码。它会在纯文本中以蓝色带有下划线的形式格式化电话号码(在某些背景下看起来很丑),此外,它还会将增值税号识别为电话号码。

那么,作为网站管理员,我们如何控制它:

  • 如何呈现检测到的内容(我认为微软发明了他们自己的CSS选择器来处理这个内容?)

  • 如何关闭检测功能

最好是只针对该浏览器进行设置,而不会影响其他浏览器或添加非标准代码。

编辑:

  • 根据IE11的方式关闭检测功能并不能在所有测试中都奏效。meta标签无法生效,而非标准的HTML属性似乎可以奏效。

  • 我查看了Edge浏览器中的检查元素选项,发现检测到的项目的计算CSS与未检测到时的计算CSS相同(即计算CSS通常颜色和没有下划线),这表明几乎无法控制其呈现方式。

编辑:

测试用例1:meta标签(失败)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- test -->
    <meta name="format-detection" content="telephone=no" />
  </head>
  <body>
    <p>text VAT BE 0123.456.789 text </p>
    <p>text +32 11 222 333 text</p>
  </body>
</html>

测试用例2:非标准HTML属性(有效)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <p x-ms-format-detection="none">text VAT BE 0123.456.789 text </p>
    <p>text +32 11 222 333 text</p>
  </body>
</html>


我今天检查了一下 - 在桌面版Edge中元数据可以正常工作(Windows 10 Build 15063)。 - Kitet
元标签(上面的测试用例1)在Edge中有效。为什么在stackoverflow中点击“运行代码片段”时不起作用-您的代码被放置在iframe中;而且似乎iframe中的元标签被忽略了。在Microsoft Edge 44.19041.423.0,Microsoft EdgeHTML 18.19041上进行了测试。 - nvirth
5个回答

28

显然,电话号码识别功能已在Internet Explorer 11中引入,但未在桌面上实现。

以下是控制此功能的方法,摘自此MS文章:Phone number format recognition

  • 要禁用元素(及其子元素)的此行为,请将x-ms-format-detection属性设置为“none”。
  • 要禁用网页的此行为,请使用meta元素:

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

  • 要启用元素(及其子元素)的此行为,请将x-ms-format-detection属性设置为“phone”或“all”。

  • 要通过JavaScript进行选择性控制行为,请使用setAttribute更改相关元素或其父元素的x-ms-format-detection属性的值。(请注意,这需要在元素或父元素呈现于DOM之前完成;不支持动态更改。)

如果我理解正确,如果在浏览器级别禁用了电话号码检测,则将忽略x-ms-format-detection属性(或meta标记)。


谢谢,我稍后会测试它。顺便说一句:我仍在寻找如何控制检测到的内容呈现方式(我认为允许手机检测电话号码(它们是电话...)有一定价值...)。 - user3277192
至少在Edge上无法工作。它可能在Windows手机上的IE11中工作,但我没有Windows手机。 - user3277192
你的意思是说在Edge中 x-ms-format-detection="none" 不起作用吗?这个属性对我有效,但是我使用的是Windows 10 Pro Insider Preview版本,或许实际Win 10上有所不同。 - jfrej
在 Windows 10 家庭版的全新安装中,添加了 <meta> 标签并不起作用。请参见问题编辑中的测试用例。 - user3277192
x-ms-format-detection="none" HTML属性确实起作用...现在,由于我的真实案例中的代码是作为XML提供的...添加非标准HTML属性... - user3277192
对我来说,x-ms-format-detection="none" 是有效的,但 不适用于 <span> 元素,这是我本能地首先尝试的元素。这是微软相当令人恼火的特性! - Ben Hillier

6
使用x-ms-format-detection="none"对我很有用。但是我不得不将其添加到父元素中。
例如,我的电话号码被包装在一个span类中,因此我必须将其添加到上面的父div中。直接添加到span标签并不能解决我的边缘问题。
希望这可以帮助到您。

谢谢,不过我希望有一种不会用非标准属性污染(x)html的方法 - 特别是因为它们是用于呈现问题的。 - user3277192
1
对我来说,x-ms-format-detection="none" 是有效的,但是不适用于 <span> 元素,这是我本能地首先尝试的元素。这是一个非常恼人的特性,微软! - Ben Hillier

1
如果您在body标签中添加x-ms-format-detection="none",它将应用于整个页面。
<body x-ms-format-detection="none">

谢谢,但是如之前所说,我想要的东西不涉及向HTML添加非标准属性(特别是因为其中一些作为XHTML提供)。 - user3277192

1

我找到了一种对我来说非常完美的方法,它是通过将数字所在的标签更改为“a”(锚点),而不是任何你可能有的标签,而无需使用href。然后,将文本下划线设置为none,颜色设置为inherit。就这样。


-1

这应该是一条评论,但我还没有足够的声望,抱歉!

jfrej之前的好回答和Ben Hillier的后续评论的基础上,我想指出x-ms-format-detection="none"可以在元素上工作,但不适用于默认的display: inline,而是使用display: inline-block样式来设置您的

同样,使用<div x-ms-format-detection="none" style="display: inline">1234567890</div>也不起作用。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接