31

Windows 10's edge browser seems to detect phone numbers even if there's no phone app installed on the system.

It formats the phone number in blue with an underline even if it's just in the plain text somewhere (ugly on some backgrounds), moreover it detects e.g. VAT numbers as if they were phone numbers.

So how do we control it as webmasters to:

  • how it renders the detected stuff (I suppose MSFT invented their very own CSS selector for this stuff?)

  • how do we turn the detection off

Preferably with something just targeting that browser and not risk messing up things for others or adding non-standard things to otherwise valid code.

EDIT:

  • The suggested way to turn detection off based on the way it is done in IE11 for windows phones does not work in all of my tests. The meta tag fails and the non-standard html attribute does seem to work.

  • I've looked at the inspect thing in edge and it seems to me the computed CSS for those detected items is what one would expect to see there if it were not detected (i.e. the computed CSS is the normal color and no underline), suggesting little chance of controlling how it's rendered.

EDIT:

test case 1: meta tag (fails)

<!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>

Test case 2: non-standard html attribute (works)

<!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>
  • I've checked today - the meta works in Edge for desktop (windows 10 build 15063) – Kitet May 25 '17 at 09:50
  • The meta tag (test case 1 above) works in Edge. Why it does not work here in stackoverflow when clicking "run code snippet" - Your code is put within an iframe; and it seems the meta within the iframe is ignored. Tested on Microsoft Edge 44.19041.423.0, Microsoft EdgeHTML 18.19041 – nvirth Sep 03 '20 at 09:20

5 Answers5

28

Apparently phone number detection was introduced in Internet Explorer 11, but not on desktops.

Here are ways to control it, taken from this MS article: Phone number format recognition

  • To disable the behavior for an element (and its child elements), set the x-ms-format-detection attribute to "none".
  • To disable the behavior for a webpage, use the meta element:

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

  • To enable the behavior for an element (and its child elements), set the x-ms-format-detection attribute to "phone" or "all".

  • To selectively control the behavior using JavaScript, use setAttribute to change the value of the x-ms-format-detection attribute of the associate element or its parent. (Note that this needs to be done before the element or the parent is rendered in the DOM; dynamic changes are not supported.)

If I understand the article correctly, if phone detection is disabled at the browser level, the x-ms-format-detection attribute (or the meta tag) will be ignored.

jfrej
  • 4,548
  • 29
  • 36
  • Thanks, I'll test it later. FWIW: still looking how to control how the detected stuff is rendered (I see some value in allowing phones to detect phone numbers (them being a phone ...) –  Jul 30 '15 at 10:15
  • Does not work in edge at least. It might work in IE11 on a windows phone but I don't own a windows phone. –  Jul 30 '15 at 10:36
  • You mean `x-ms-format-detection="none"` doesn't work in Edge? It works for me but I used Windows 10 Pro Insider Preview, perhaps it's different on actual Win 10. – jfrej Jul 30 '15 at 10:43
  • Added the , tag: does not work in a fresh install of Windows 10 home. See the test case in the edit of the question. –  Jul 30 '15 at 11:01
  • The x-ms-format-detection="none" html attribute does work ... Now since the code in my real world case is served as xml ... adding non-standard html attributes ... –  Jul 30 '15 at 11:12
  • For me `x-ms-format-detection="none"` does work, but **not in a ``**, which is the element I instinctively tried first. A pretty irritating feature, Microsoft! – Ben Hillier Mar 19 '18 at 14:35
6

Using the x-ms-format-detection="none" worked for me. However I had to add it to the parent element.

For example my phone number was wrapped in a span class so I had to add it to parent div above. Adding directly to the span tag didn't fix the issue on edge for me.

Hope that helps

MikeBurgess
  • 61
  • 1
  • Thanks, I was (am) however hoping for something that does not pollute the (x)html with nonstandard attributes - esp. since they are for presentation issues. –  Aug 13 '15 at 11:07
  • 1
    For me `x-ms-format-detection="none"` does work, but **not in a ``**, which is the element I instinctively tried first. A pretty irritating feature, Microsoft! – Ben Hillier Mar 19 '18 at 14:35
1

I've found a way that works perfect for me, and it consist on change the tag where you have the number by an "a" (anchor) instead of any one you may have, with no need of href. Then, set text-underline to none and color to inherit. That's all.

Jordi
  • 11
  • 2
1

If you add x-ms-format-detection="none" to the body tag it will be applied to the whole page.

<body x-ms-format-detection="none">
Mark B
  • 649
  • 5
  • 11
  • Thanks, but as said before I'd like something that does not involve adding nonstandard attributes to the html (esp. as some of it is served as xhtml). –  Nov 26 '15 at 01:50
-1

This should be a comment, but I dont have the reputation yet, sorry!

Building on good the previous answer by jfrej and subsequent comment by Ben Hillier, I'd like to point out that x-ms-format-detection="none" can work on a span element, but not with de default display: inline, rather style your span with a display: inline-block.

Similarly using <div x-ms-format-detection="none" style="display: inline">1234567890</div> will not work either.

PMCS
  • 21
  • 1
  • 2