417

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?

2

25 Answers 25

804

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.

18
  • 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/… 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? Jun 22, 2015 at 19:01
  • 4
    This works perfectly fine under IOS 12 in 2019! 👍🏻 Apr 5, 2019 at 1:05
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).

7
  • 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 (!). 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
51

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.

5
  • 5
    Great solution where you want to restrict styling/formatting in very specific location. May 1, 2016 at 2:21
  • 1
    This is the best solution, IMO, since it doesn't require making any modifications to the HTML. May 14, 2021 at 20:07
  • 1
    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! Sep 22, 2022 at 12:50
36

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

<meta name = "format-detection" content = "telephone=no">
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;
1
  • 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!! Aug 26, 2011 at 1:21
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.

1
  • 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
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>
3
  • 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. 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
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>

1
  • This helped me when needed to still use the default iOS styling and actions but ignore specific elements. Aug 4, 2017 at 17:57
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.

4
  • 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. 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." 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
6

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.

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
3
  • 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. Jan 7, 2015 at 10:50
  • 1
    The simplest solution, thank you, Jay! Sep 16, 2022 at 5:00
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).

3
  • 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: <p>Not a phone: 112<span>34</span>56</p>
    – Radek Pech
    Jan 5, 2015 at 14:50
  • @Geert, set line-height and font-size to zero.
    – HelpNeeder
    Jan 8, 2016 at 15:23
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.5<span>5</span>5.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.

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

<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

1

You could try encoding them as HTML entities:

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

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

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.

3
  • 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. 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
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;
}
5
  • 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 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 Dec 1, 2020 at 12:43
1

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 &#8288; 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&#8288;048&#8288;8 which renders in 0613605⁠048⁠8 and it is not transformed in a telephone number.

1

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

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.

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

1

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

wkWebView.configuration.dataDetectorTypes  = []
0

Break the number down into separate blocks of text

301 <div style="display:inline-block">441</div> 3909
1
  • 4
    You might want to mention that this is a workaround.
    – Daan
    Jul 3, 2018 at 12:45

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