CODEWITHSUNDEEP
javascriptmobile-safari
TrongBang
TrongBang

Reputation: 967

iOS 10 Safari browser injects links for phone numbers

I have a div which is hidden. The div contains json data which is read and parsed by react components. The problem is on iOS, safari keeps changing the values of the phone numbers like this.

Original:

<div id='data' style='display: none'>{"phone":"012345678"}</div>

Safari:

<div id='data' style='display: none'>{"phone":"<a href="tel: 012345678">012345678</a>"}</div>

This causes JSON.parse() failing on client side. How can I stop this behaviour.

Upvotes: 3

Views: 841

Answers (2)

TrongBang
TrongBang

Reputation: 967

The suggestion from Maimilano Poggio is very good. However it didn't work for me since I still want auto-formatting for phone numbers work in other parts of the webpage. Hence, I came up with my own solution. Instead of using <div/> tag, I use <pre/> tag. This makes sure the relevant parts don't get formatted by accidents in iOS safari.

Upvotes: 2

Maximiliano Poggio
Maximiliano Poggio

Reputation: 1182

you have to add this to your html index

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

Upvotes: 2

Related Questions