How to disable phone number linking in Mobile Safari?

Question

Safari on iPhone automatically creates links for strings of digits that appear to the telephone numbers. I am writing a web page containing an IP address, and Safari is turning that into a phone number link. Is it possible to disable this behavior for a whole page or an element on a page?

<meta name = "format-detection" content = "telephone=no"> worked for for iOs 16 Safari — Elcast, Dec 16, 2022 at 17:13

Scott Hoffman · Accepted Answer · 2018-04-06 00:17:48Z

803

This seems to be the right thing to do, according to the Safari HTML Reference:

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

If you disable this but still want telephone links, you can still use the "tel" URI scheme.

Here is the relevant page at Apple's Developer Library.

edited Apr 6, 2018 at 0:17

Scott Hoffman

5567 silver badges21 bronze badges

answered Oct 22, 2008 at 19:36

lewinski

8,1751 gold badge17 silver badges5 bronze badges

2

This simply doesn't work. Not for web apps on iOS 4.3.1 anyway.
– mhenry1384
May 18, 2011 at 15:37
6

4.2.1 on iPhone works; developer.apple.com/library/ios/#featuredarticles/…
– Mark Brackett
May 27, 2011 at 20:22
2

Just wanted to note this also works for recent versions, such as 5.1.1 which I'm on now.
– Dave Stein
Aug 16, 2012 at 21:34
5

Can this be applied on a case by case basis? For example, 1 number string on a page I don't want to be interpreted as a phone number, but keep the behavior for 6 others on a page that I do want to be automatically interpreted as a phone number?
– jpostdesign
Jun 22, 2015 at 19:01
4

This works perfectly fine under IOS 12 in 2019! 👍🏻
– Matt Komarnicki
Apr 5, 2019 at 1:05

| Show 13 more comments

stickyuser · Accepted Answer · 2016-04-20 03:15:16Z

70

I use a zero-width joiner &zwj;

Just put that somewhere in the phone number and it works for me. Tested in BrowserStack (and Litmus for emails).

answered Apr 20, 2016 at 3:15

stickyuser

2,74216 silver badges16 bronze badges

1

This works for me. I just add it before the first number.
– vinboxx
May 27, 2016 at 4:10
1

Neat solution. Worked fine on iPhone 6S(+)/iOS 9.
– Ain Tohvri
Oct 9, 2017 at 21:19
1

This is the only workable solution if you're asking Mobile Safari to load an XML file that uses an <?xml-stylesheet> directive to generate the HTML page. Mobile Safari converts any long number in the original XML into a "tel:" link, even though the source isn't HTML (!).
– Mark Reinhold
Mar 13, 2018 at 19:36
1

Best solution for one-off cases. For example: when Safari thinks a certain element is a phone number and it isn't, but you don't want to override all other instances of phone numbers on the page.
– Danny
Jan 19, 2021 at 23:13
1

The format-detection meta tag sadly didn't work. But this worked beautifully. Thank you!
– Diego
Nov 22, 2023 at 3:29

| Show 2 more comments

Florian Grell · Accepted Answer · 2013-03-12 10:29:25Z

50

To disable the phone parsing appearance for specific elements, this CSS seems to do the trick:

.element { pointer-events: none; }
.element > a { text-decoration:none; color:inherit; }

The first rule disables the click, the second takes care of the styling.

answered Mar 12, 2013 at 10:29

Florian Grell

1,0058 silver badges18 bronze badges

5

Great solution where you want to restrict styling/formatting in very specific location.
– mikevoermans
May 1, 2016 at 2:21
This is the best solution, IMO, since it doesn't require making any modifications to the HTML.
– kmgdev
May 14, 2021 at 20:07
Thank you. Applied for Brave Browser on iOS
– user1836049
Aug 4, 2021 at 15:50
1

doesn't work in iOs 14 and 13 at least not when it's not a link
– OZZIE
Sep 7, 2021 at 12:31
this is the best solution if you want to keep tel functionality and disable it in a specific place. thanks for it!
– Troyan Victor
Sep 22, 2022 at 12:50

Add a comment |

user1921user1921 · Accepted Answer · 2008-10-22 15:18:03Z

36

Add this, I think it is what you're looking for:

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

answered Oct 22, 2008 at 15:18

user1921

Add a comment |

animuson · Accepted Answer · 2011-12-14 20:08:31Z

33

I was having the same problem. I found a property on the UIWebView that allows you to turn off the data detectors.

self.webView.dataDetectorTypes = UIDataDetectorTypeNone;

edited Dec 14, 2011 at 20:08

animuson♦

54.4k28 gold badges140 silver badges149 bronze badges

answered Apr 5, 2011 at 20:18

catshow

3313 silver badges2 bronze badges

At last, a solution that worked for me. Of course this will only work with people writing their own objective-c application using UIWebView, and not using the Safari app. Thanks!!
– iandotkelly
Aug 26, 2011 at 1:21

Add a comment |

TRiG · Accepted Answer · 2014-02-05 18:02:40Z

10

Solution for Webview!

For PhoneGap-iPhone / PhoneGap-iOS applications, you can disable telephone number detection by adding the following to your project’s application delegate:

// ...

- (void)webViewDidStartLoad:(UIWebView *)theWebView 
{
    // disable telephone detection, basically <meta name="format-detection" content="telephone=no" />
    theWebView.dataDetectorTypes = UIDataDetectorTypeAll ^ UIDataDetectorTypePhoneNumber;

    return [ super webViewDidStartLoad:theWebView ];
}

// ...

source: Disable Telephone Detection in PhoneGap-iOS.

edited Feb 5, 2014 at 18:02

TRiG

10.4k7 gold badges58 silver badges111 bronze badges

answered Oct 15, 2011 at 13:45

user788055

Went in to implement the awoodland's code before I read badger110 comment. So there I am, in AppDelegate.m when it occurs to me that I've seen this somewhere. I start looking around, find the checkbox in xib file and I think I've just discovered something magical. I come back to post this glorious discovery and find badger110's comment was there all along. TL DR: Read the comments first, ya knuckle head.
– Tina D.
Nov 30, 2011 at 15:30

Add a comment |

JustJohn · Accepted Answer · 2011-12-13 23:47:02Z

9

To disable phone number detection on part of a page, wrap the affected text in an anchor tag with href="#". If you do this, mobile Safari and UIWebView should leave it alone.

<a href="#"> 1234567 </a>

edited Dec 13, 2011 at 23:47

JustJohn

3611 silver badge7 bronze badges

answered Jun 14, 2011 at 19:53

yodaisgreen

2,3103 gold badges22 silver badges27 bronze badges

1

This is what I ended up doing since the meta tag didn't work. However, it's probably better done with <a href="javascript:;"> to prevent side effects from a URL change.
– JustJohn
Dec 13, 2011 at 23:28
This works for me in HTML email. I only wanted to disable one phone number, not all. I just added the style="text-decoration:none;" to the tag with the color to match the rest of the text, and you could change the cursor style too.
– Simon Darby
Nov 29, 2014 at 2:01
This worked great for me for some hidden javascript numbers I needed that safari was interpreting as phone numbers, thanks!
– jsmars
Jan 21, 2021 at 11:11

Add a comment |

diazwatson · Accepted Answer · 2015-06-25 15:04:16Z

8

You can also use the <a> label with javascript: void(0) as href value.

Example as follow:
<a href="javascript: void(0)">+44 456 77 89 87</a>

answered Jun 25, 2015 at 15:04

diazwatson

1315 silver badges12 bronze badges

This helped me when needed to still use the default iOS styling and actions but ignore specific elements.
– greaterKing
Aug 4, 2017 at 17:57

Add a comment |

BobFromBris · Accepted Answer · 2010-08-10 20:16:14Z

6

Think I've found a solution: put the number inside a <label> element. Haven't tried any other tags, but <div> left it active on the home screen, even with the telephone=no attribute.

It seems obvious from earlier comments that the meta tag did work, but for some reason has broken under the later versions of iOS, at least under some conditions. I am running 4.0.1.

edited Aug 10, 2010 at 20:16

answered Aug 9, 2010 at 6:48

BobFromBris

2614 silver badges6 bronze badges

Hi Bob. If you want to put in HTML code examples, you have to wrap the code in backticks, <like this>. (Stack Overflow uses a formatting language called Markdown.) I’ll edit your answer accordingly.
– Paul D. Waite
Aug 9, 2010 at 22:11
That didn't ultimately work - when I reloaded the App, the link hiliting was back. I have resorted to adding a# character to the front of the phone number: according to the Apple doc "Apple URL Scheme Reference": "Specifically, if a URL contains the * or # characters, the Phone application does not attempt to dial the corresponding phone number."
– BobFromBris
Aug 10, 2010 at 7:59
You should remove your answer, since it doesn't work. As you yourself acknowledge in the above comment.
– mhenry1384
May 18, 2011 at 15:38
@Bob Nice clean tip. We had issues with HTML in an email. Wrapping in a label worked nicely +1, thanks
– geedubb
Nov 7, 2013 at 12:14

Add a comment |

Alan M. · Accepted Answer · 2011-09-05 08:14:56Z

My experience is the same as some others mentioned. The meta tag...

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

...works when the website is running in Mobile Safari (i.e., with chrome) but stops working when run as a webapp (i.e., is saved to home screen and runs without chrome).

My less-than-ideal solution is to insert the values into input fields...

<input type="text" readonly="readonly" style="border:none;" value="3105551212">

It's less than ideal because, despite the border being set to none, iOS renders a multi-pixel gray bar above the field. But, it's better than seeing the number as a link.

Jay · Accepted Answer · 2013-02-14 07:56:46Z

5

I have tested this myself and found that it works although it is certainly not an elegant solution. Inserting an empty span in the phone number will prevent the data detectors from turning it into a link.

(604) 555<span></span> -4321

answered Feb 14, 2013 at 7:56

Jay

1,13613 silver badges25 bronze badges

1

This is also the fix I ended up using and it work very well and is quite simple.
– Holger
Oct 23, 2014 at 12:22
2

This isnt a good Answer, because you generate willful bad HTML.
– stephanfriedrich
Jan 7, 2015 at 10:50
1

The simplest solution, thank you, Jay!
– Anton Shtin
Sep 16, 2022 at 5:00

Add a comment |

mhenry1384 · Accepted Answer · 2011-05-18 15:54:48Z

4

I had an ABN (Australian Business Number) that iPad Safari insisted on turning into a phone number link. None of the suggestions helped. My solution was to put img tags between the numbers.

ABN 98<img class="PreventSafariFromTurningIntoLink" /> 009<img /> 675<img /> 709

The class exists only to document what the img tags are for.

Works on iPad 1 (4.3.1) and iPad 2 (4.3.3).

answered May 18, 2011 at 15:54

mhenry1384

7,6086 gold badges56 silver badges74 bronze badges

3

Unfortunately, in Internet Explorer I get those broken image icons. Adding width="0" height="0" helps, but still a single pixel is displayed.
– Geert
Jul 29, 2011 at 11:17
1

You don't need images, just put any HTML inside the number: Not a phone: 1123456
– Radek Pech
Jan 5, 2015 at 14:50
@Geert, set line-height and font-size to zero.
– HelpNeeder
Jan 8, 2016 at 15:23

Add a comment |

mattstuehler · Accepted Answer · 2011-04-26 22:17:14Z

2

I had the same problem, but on an iPad web app.

Unfortunately, neither...

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

nor ...

&#48; = 0
&#57; = 9

... worked.

But, here's three ugly hacks:

replacing the number "0" with the letter "O"
replacing the number "1" with the letter "l"
insert a meaningless span: e.g., 555.555.5555

Depending on the font you use, the first two are barely noticeable. The latter obviously involves superfluous code, but is invisible to the user.

Kludgy hacks for sure, and probably not viable if you're generating your code dynamically from data, or if you can't pollute your data this way.

But, sufficient in a pinch.

edited Apr 26, 2011 at 22:17

answered Apr 26, 2011 at 22:11

mattstuehler

9,16218 gold badges79 silver badges110 bronze badges

3

“Depending on the font you use, the first two are barely noticeable” Unless the user has set iOS to read the content out to them. Then it’d be pretty noticeable.
– Paul D. Waite
Mar 30, 2014 at 17:57
3

For accessibility (like text reader mentioned above), or if the user copy/pastes into the phone app, this just breaks things. Also, in general if a spider from Yelp or Google or the like is indexing a business, and pulls the wrong phone number, that's no good.
– Jonah
May 11, 2016 at 16:05

Add a comment |

Phil LaNasa · Accepted Answer · 2013-07-29 15:27:40Z

2

A trick I use that works on more than just Mobile Safari is to use HTML escape codes and a little mark-up in the phone number. This makes it more difficult for the browser to "identify" a phone number, i.e.

Phone: 1-8&#48;&#48;<span>-</span>62&#48;<span>-</span>38&#48;3

answered Jul 29, 2013 at 15:27

Phil LaNasa

2,9751 gold badge25 silver badges16 bronze badges

Add a comment |

Paul D. Waite · Accepted Answer · 2014-03-30 17:56:28Z

<meta name = "format-detection" content = "telephone=no"> does not work for emails: if the HTML you are preparing is for an email, the metatag will be ignored.

If what you are targeting are emails, here's yet another ugly-but-works solution for ya'll:

Example of some HTML you want to avoid being linked or auto formatted:

will cease operations <span class='ios-avoid-format'>on June 1,
2012</span><span></span>.

And the CSS that will make the magic happen:

@media only screen and (device-width: 768px) and (orientation:portrait){
span.ios-date{display:none;}
span.ios-date + span:after{content:"on June 1, 2012";}
}

The drawback: you may need a media query for each of the ipad/iphone portrait/landscape combos

Diodeus - James MacFarlane · Accepted Answer · 2008-10-22 15:14:28Z

1

You could try encoding them as HTML entities:

&#48; = 0
&#57; = 9

answered Oct 22, 2008 at 15:14

Diodeus - James MacFarlane

113k33 gold badges160 silver badges178 bronze badges

Add a comment |

animuson · Accepted Answer · 2012-01-25 19:37:21Z

1

Same problem in Sencha Touch app solved with meta tag (<meta name="format-detection" content="telephone=no">) in index.html of app.

edited Jan 25, 2012 at 19:37

animuson♦

54.4k28 gold badges140 silver badges149 bronze badges

answered Jan 25, 2012 at 19:16

someone else

191 bronze badge

Add a comment |

Pavel Strakhov · Accepted Answer · 2012-06-13 19:20:23Z

1

This answer trumps everything as of 6-13-2012:

<a href="#" style="color: #666666; 
                   text-decoration: none;
                   pointer-events: none;">
  Boca Raton, FL 33487
</a>

Change the color to whatever matches your text, text decoration removes the underline, pointer events stops it from being viewed like a link in a browser (pointer doesn't change to a hand)

This is perfect for HTML emails on ios and browser.

edited Jun 13, 2012 at 19:20

Pavel Strakhov

39.8k6 gold badges88 silver badges128 bronze badges

answered Jun 13, 2012 at 18:38

Vincent Tobiaz

1261 silver badge3 bronze badges

1

Looks to me like this sets the color explicitly. In other words, it will be gray no matter what.
– benzado
Jun 13, 2012 at 22:05
“pointer events stops it from being viewed like a link in a browser” — in a browser that supports pointer-events, sure. If the user is viewing your HTML e-mails in IE 10, however, no good.
– Paul D. Waite
Mar 30, 2014 at 17:59
The question is about suppressing detection of phone numbers, not mailing addresses.
– jww
Sep 13, 2014 at 9:41

Add a comment |

Marc · Accepted Answer · 2014-03-24 09:45:38Z

1

Why would you want to remove the linking, it makes it very user friendly to have th eoption.

If you simply want to remove the auto editing, but keep the link working just add this into your CSS...

a[href^=tel] {
 color: inherit;
 text-decoration:inherit;
}

answered Mar 24, 2014 at 9:45

Marc

453 bronze badges

10

well, I cannot say about the original poster, but in my case Safari is guessing phones that are not actually phone numbers, they are financial data
– Irae Carvalho
Jul 10, 2014 at 17:39
1

The question is about link detection on telephone numbers, not editing them.
– jww
Sep 13, 2014 at 9:43
In some cases you may have a phone number on a website where you need to perform some other operation than making a phone-call like pulling up an option to edit it, or the ability to click-and-drag it to somewhere else.
– Nosajimiki
Nov 1, 2018 at 18:59
he does not want to have ip addresses linked as phone numbers
– jahller
Nov 15, 2018 at 10:24
This worked for me when Safari was adding link styles to random numbers in the same div. Set everything to inherit for the tel element
– user3615851
Dec 1, 2020 at 12:43

Add a comment |

Community · Accepted Answer · 2017-05-23 12:02:56Z

I too have this problem: Safari and other mobile browsers transform the VAT IDs into phone numbers. So I want a clean method to avoid it on a single element, not the whole page (or site).
I'm sharing a possible solution I found, it is suboptimal but still it is pretty viable: I put, inside the number I don't want to become a tel: link, the ⁠ HTML entity which is the Word-Joiner invisible character. I tried to stay more semantic (well, at least a sort of) by putting this char in some meaning spot, e.g. for the VAT ID I chose to put it between the different groups of digit according to its format so for an Italian VAT I wrote: 0613605⁠048⁠8 which renders in 0613605⁠048⁠8 and it is not transformed in a telephone number.

Daniel · Accepted Answer · 2016-04-29 01:14:01Z

1

Another option is to replace the hyphens in your phone number by the character ‑ (U+2011 'Unicode Non-Breaking Hyphen')

answered Apr 29, 2016 at 1:14

Daniel

4,1312 gold badges29 silver badges47 bronze badges

Add a comment |

Oliver P · Accepted Answer · 2016-06-09 09:42:47Z

1

I was really confused by this for a while but finally figured it out. We made updates to our site and had some numbers converting to a link and some weren't. Turns out that numbers won't be converted to a link if they're in a <fieldset>. Obviously not the right solution for most circumstances, but in some it will be the right one.

answered Jun 9, 2016 at 9:42

Oliver P

3,2192 gold badges16 silver badges13 bronze badges

Add a comment |

dev_willis · Accepted Answer · 2022-09-16 15:09:22Z

1

Adding the meta tag to turn off format detection did not work for me. I was trying to display a zoom meeting ID in a  tag along with other text and iOS was turning that ID into a tel link. Additionally, I was targeting tel links via a[href^="tel:"] in order to give them custom styling so disabling the styles on tel links was not an option.

The solution I found was to wrap the ID number in a <code> tag. This seems to prevent iOS from messing with it.

answered Sep 16, 2022 at 15:09

dev_willis

5484 gold badges7 silver badges20 bronze badges

Add a comment |

JoeGalind · Accepted Answer · 2023-03-10 19:11:10Z

1

For WKWebView, the Swift equivalent to none is the following:

wkWebView.configuration.dataDetectorTypes  = []

answered Mar 10, 2023 at 19:11

JoeGalind

3,6552 gold badges30 silver badges34 bronze badges

Add a comment |

Kareem · Accepted Answer · 2016-07-05 22:20:43Z

0

Break the number down into separate blocks of text

301 <div style="display:inline-block">441</div> 3909

answered Jul 5, 2016 at 22:20

Kareem

5,25846 silver badges39 bronze badges

4

You might want to mention that this is a workaround.
– Daan
Jul 3, 2018 at 12:45

Add a comment |

Collectives™ on Stack Overflow

How to disable phone number linking in Mobile Safari?

25 Answers 25

Solution for Webview!

Not the answer you're looking for? Browse other questions tagged
iphone
safari
mobile-safari
or ask your own question.

Linked

Hot Network Questions

Collectives™ on Stack Overflow

25 Answers 25

Solution for Webview!

Not the answer you're looking for? Browse other questions tagged iphonesafarimobile-safari or ask your own question.

Linked

Related

Not the answer you're looking for? Browse other questions tagged
iphone
safari
mobile-safari
or ask your own question.