WebKit browsers see telephone numbers everywhere

2 min read Original article ↗

Just like Excel seeing everything as a date, WebKit mobile browsers automatically interpret many numbers as telephone numbers. When detected, mobile browsers replace the text in the HTML with a clickable <a href="tel:..."> value that when selected will call the number denoted. This can be helpful sometimes, but frustrating other times as random numbers in your HTML suddenly become useless hyperlinks.

Below I've included numbers that may be turned into phone numbers so you can see for yourself why this may be a problem and how many cases there are. Numbers that are detected as a phone number by your browser are highlighted blue by this CSS selector:

a[href^=tel] {
  background-color: #00ccff;
}

None of the values below are denoted as telephone number links in the source HTML, they are all automatically created by the browser. If you're not using WebKit, enable this check-box to show WebKit's behavior:

  • 2
  • 22
  • 222
  • 2222
  • 22222
  • 222222
  • 2222222
  • 22222222
  • 222222222
  • 2222222222
  • 22222222222
  • 111111111111
  • 222222222222
  • 555555555555
  • 1111111111111
  • 2222222222222 (???)
  • 5555555555555
  • 11111111111111
  • 22222222222222
  • 55555555555555
  • 111111111111111
  • 222222222222222
  • 555555555555555
  • 2-2
  • 2-2-2
  • 22-2-2
  • 22-22-2
  • 22-22-22
  • 22-22-222
  • 22-222-222
  • 222-222-222
  • 222-222-2222
  • 222-2222-2222
  • 2222-2222-2222
  • 2222-2222-22222
  • 2222-22222-22222
  • 22222-22222-22222
  • 2 222-222-2222
  • +1 222-222-2222
  • +2 222-222-2222 (There is no +2 country code...)
  • +28 222-222-2222 (Unassigned codes aren't used)
  • +1222-222-2222
  • +2222-222-2222
  • (+1)222-222-2222
  • (+2)222-222-2222
  • (1)222-222-2222
  • (2)222-222-2222
  • (1222-222-2222
  • (1 222-222-2222
  • 1)222-222-2222
  • 222–222–2222 (en-dashes)
  • 222—222—2222 (em-dashes)
  • [1]222-222-2222
  • <1>222-222-2222

Are there any other combinations that get detected as telephone numbers that I missed? Send me a pull request or email.

How to prevent automatic telephone number detection?

So how can you prevent browsers from parsing telephone numbers automatically? Add this HTML to your <head> section:

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

This will disable automatic telephone detection, and then you can be explicit about clickable telephone numbers by using the tel: URL scheme like so:

<a href="tel:+222-222-222-2222">(+222)222-222-2222</a>

Wow, you made it to the end!