How to prevent detected Phone Numbers turning into links in Edge browser

edge-browser-phone-numbers-problem

Microsoft Edge browser for Windows 10 has many features, but one of them may cause problems. This feature overrides the original style of telephone numbers with its own style. It also automatically adds clickable links, sometimes even to data not representing phone numbers. I encountered this issue recently and this article will show the solution to the problem.

I was adding an article to the website I’m maintaining and among other things it contained a program schedule using a dot as the separator between an hour and minute (for example 11.00 – 11.30). I noticed that in Edge browser, some of this information was modified into clickable links as shown below:

Hour schedule automatically changed to a link.

The added hyperlinks were not visible in the page source, so the Edge was not modifying the DOM. When that underlined link was clicked, a message window with the title "You'll need a new app to open this tel" showed up, asking me, which app to use:

App window after clicking on a link that was added automatically by Edge Browser.

If I clicked on “Look for an app in the Store”, the App Store offered me a bunch of phone-related apps, like Lync, Skype Translator, MobileVoIP, GVoice, and so on. It seems, the Edge Browser wrongly detects the hour schedule as a phone number.

Even with real phone numbers on a page, this feature was causing issues as the Edge browser was overriding the CSS styling of those phone numbers, and by doing that it interferes with the design of the website.

Luckily, there are a few ways to solve this problem. After applying any of the solutions below, those hourly schedule information along with the styles of real telephone numbers are left alone.

After the fix, Edge does not add links automatically.

Solution 1 - Adding specific Meta tag inside the head tag

One way to stop the Microsoft Edge browser from creating phone number links and prevent overrides of website's CSS styling is to add the following line inside the <head> tag.

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

We use this solution when we want to remove this behavior all together from a webpage.

Using WordPress Plugin

If you are using WordPress, you can use this WordPress plugin. The plugin will add the same line as shown above without the need to manually change the theme files.

Solution 2 - Adding attribute to the element

When we need to disable this phone number detection only on a specific element, we can use x-ms-format-detection attribute, like so:

<p x-ms-format-detection="none">11.30 - 11.45</p>

This solution becomes handy when we want to remove the styling only on elements that are not phone numbers, like in the above example, which contains a schedule.

Solution 3 - Using JavaScript

If we need to disable this behavior only when some condition is met, we can use JavaScript to achieve that by adding x-ms-format-detection attributes to elements. For example, commentator davehorror mentioned a behavior that would leave the styles alone for mobile devices, but made them disable for the desktop. This can be achieved with the following code:

if (window.matchMedia('(min-width: 1024px)').matches) {
    var e = document.getElementsByClassName("phone");
    for (i = 0; i < e.length; i++)
        e[i].setAttribute("x-ms-format-detection", "none");
}

So if we have the following HTML code:

    <p x-ms-format-detection="none">11.30 - 11.45</p>
    <p class="phone">Phone: 11 222 333</p>
    <p class="phone">Phone: 22 333 444</p>

Phone numbers would keep the automatic styling as long as the viewport is smaller than 1024px, otherwise, x-ms-format-detection="none" attribute is added to every element with phone class.

In the case for the schedule (first <p> on line 1), we don't want to use automatic styling at all, so we use Solution 2 to that element by adding x-ms-format-detection attribute with none value.

Check the working demo of the above code on CodePen.

Note: To learn more about phone number detection and how it works, check this MSDN page. Apparently, this was added in Internet Explorer 11, it was just not active in a desktop mode.

Conclusion

One of the features of Edge browser and Internet Explorer 11 can cause unnecessary problems when it wrongly recognizes various numerical data like phone numbers, creating clickable links, and overriding styles for real telephone numbers. In this article, we solved this problem in 3 ways: by adding a <meta> tag, adding an attribute to the elements or by using JavaScript.

If you found this article useful, take a moment to drop a comment or share it on social networks.

This article was first published in February 2016 and has been updated and republished.

15 Comments

Click HERE to add your Comment
  1. Georg
    March 7, 2016
  2. Roger
    March 22, 2016
  3. davehorror
    October 26, 2016
    • admin
      October 26, 2016
  4. sabien
    April 7, 2017
  5. Bjørn Erik Sandbakk
    July 15, 2017
  6. Jose Neto
    October 17, 2017
    • admin
      October 19, 2017
  7. Katw
    July 4, 2018
  8. Geoff
    August 29, 2018
  9. sai kumar
    August 13, 2019
  10. Brant
    January 1, 2020
  11. AJ Clarke
    February 6, 2020
    • admin
      February 8, 2020
  12. Dean
    April 23, 2023

Write a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.