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

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

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:

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:

So if we have the following HTML code:

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 feature of Edge browser and Internet Explorer 11 can cause unnecessary problems when it wrongly recognizes various numerical data as 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 the social networks.

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

Share this page

8 Comments

Add a Comment

Back to Top