Stop iPhone from Adding HTML Telephone Links to Numbers on Your Site
Mar 9, 2023Web DevelopmentComments (1)
At least on iOS Safari on iPhone, if it runs across text that looks like it might be a phone number, it may insert an HTML link to hotlink that bit of text. So something like this:
May become this:
This may create problems as it isn't just a superficial change; the browser actually modifies the HTML of your site, and that means what your JavaScript sees will include the HTML links.
I ran into this problem as I had to store a JSON string in a div, to be picked up later by JavaScript (not ideal, but it was a work-around). iPhone was inserting these full-blown HTML links into the data and the JavaScript program wasn't expecting it. The site was working great everywhere but iOS Safari (even Mac Safari worked fine).
Solution
If you don't want iOS Safari converting numbers to telephone hyperlinks anywhere on your site, include this meta tag in your head:
You can still make your own manual telephone hyperlinks, and they won't be impacted by this meta tag.
<div>ZF Model 3213308019 Oil Filter</div>May become this:
<div>ZF Model <a href="tel:3213308019">3213308019</a> Oil Filter</div>This may create problems as it isn't just a superficial change; the browser actually modifies the HTML of your site, and that means what your JavaScript sees will include the HTML links.
I ran into this problem as I had to store a JSON string in a div, to be picked up later by JavaScript (not ideal, but it was a work-around). iPhone was inserting these full-blown HTML links into the data and the JavaScript program wasn't expecting it. The site was working great everywhere but iOS Safari (even Mac Safari worked fine).
Solution
If you don't want iOS Safari converting numbers to telephone hyperlinks anywhere on your site, include this meta tag in your head:
<meta name="format-detection" content="telephone=no">You can still make your own manual telephone hyperlinks, and they won't be impacted by this meta tag.