By benzado


2008-10-22 15:00:44 8 Comments

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?

24 comments

@lewinski 2008-10-22 19:36:47

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.

@mhenry1384 2011-05-18 15:37:11

This simply doesn't work. Not for web apps on iOS 4.3.1 anyway.

@Mark Brackett 2011-05-27 20:22:00

@somewhatsapient 2011-06-17 03:37:11

This isn't really an answer per se -- i'm just trying to lend my voice to say that this works in iOS 4.3.3, at least for me. cheers

@pixelfreak 2012-07-20 23:26:43

Can you do this on per element basis instead of turning it off for the entire page?

@Dave Stein 2012-08-16 21:34:33

Just wanted to note this also works for recent versions, such as 5.1.1 which I'm on now.

@Oliver Tappin 2013-06-11 15:29:57

Does anyone know how to do this for emails?

@EeKay 2014-02-19 09:16:22

Works nicely in my Cordova 3.3.1-0.1.2 based project! using tel indeed lets you still recognize a phone number. +1

@Christopher King 2014-04-30 14:32:59

Works on Safari Mobile on iPad and iPhone running on iOS 7.x

@craigpatik 2014-06-06 19:54:25

Note that this does not work if you insert the <meta> tag with JavaScript (at least on iOS 7.1). The tag has to be in the HTML when the browser downloads it.

@t_motooka 2014-09-03 08:35:32

@Titanium This <meta> trick works fine for the mail app on iOS 7.1.2. Just insert <meta> tag into the <head> tag in your HTML mail. Please note that we cannot apply this trick to text/plain based mails.

@jpostdesign 2015-06-22 19:01:21

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?

@BoffinBrain 2015-08-05 15:40:17

@jpostdesign Since it's a meta tag, it applies on a per-page basis. Unless all the pages on your site share a common header and footer, it should be trivial to add the meta tag to just one page.

@sulaiman sudirman 2015-10-09 14:11:57

Thanks. This works on ionic as well, put it in index page.

@Arnie 2017-11-01 08:28:53

Works for me :)

@nathanbirrell 2017-12-13 01:03:42

Works well, also works for React Native WebView components (which are basically Safari wrappers I suppose anyway)

@OnlyNoiseOnWires 2018-05-31 08:53:25

Works like a charm. Thanks a lot ^_^

@Matt Komarnicki 2019-04-05 01:05:33

This works perfectly fine under IOS 12 in 2019! 👍🏻

@Kareem 2016-07-05 22:20:43

Break the number down into separate blocks of text

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

@Daan 2018-07-03 12:45:11

You might want to mention that this is a workaround.

@Oliver P 2016-06-09 09:42:47

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.

@Daniel 2016-04-29 01:14:01

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

@stickyuser 2016-04-20 03:15:16

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

@vinboxx 2016-05-27 04:10:41

This works for me. I just add it before the first number.

@El cero 2017-04-24 23:25:49

The best solution!

@Nick 2017-06-16 12:38:57

I created an HTML email signature and this was the only solution that helped to prevent iOS 10 mail from falsely detecting a (non-phone) number as a phone number.

@Ain Tohvri 2017-10-09 21:19:49

Neat solution. Worked fine on iPhone 6S(+)/iOS 9.

@Mark Reinhold 2018-03-13 19:36:49

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

@Jules Matthews 2019-10-01 01:08:45

AWESOME: zero-width joiner &zwj; This is the best solution fo random numbers that are getting converted to phone numbers! So for example, if you have 345 456 789 - which you want to NOT be a phone number... &zwj;345&zwj;456&zwj;789

@diazwatson 2015-06-25 15:04:16

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>

@greaterKing 2017-08-04 17:57:04

This helped me when needed to still use the default iOS styling and actions but ignore specific elements.

@kaosmos 2015-06-12 13:32:15

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.

@Chris Copland 2014-09-13 09:05:33

Another solution would be to use an image of the IP number

@stephanfriedrich 2015-01-07 10:47:12

I think, this is not such a god idea. Please delete your Answer. Because, you can't copy/paste an Images Text, its not easy serviceable ( if you change content or font-style ) and also its not barrier-free.

@kaosmos 2016-08-16 16:58:04

the solution could be worst than the problema, as said by @stephanfriedrich this is not going to be useful or usable

@Luca Antonelli 2019-02-04 16:41:35

Not useful at all.

@cabrera 2012-05-01 17:14:03

<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

@Marc 2014-03-24 09:45:38

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;
}

@Irae Carvalho 2014-07-10 17:39:25

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

@jww 2014-09-13 09:43:46

The question is about link detection on telephone numbers, not editing them.

@Nosajimiki 2018-11-01 18:59:46

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.

@jahller 2018-11-15 10:24:58

he does not want to have ip addresses linked as phone numbers

@user788055 2011-10-15 13:45:12

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.

@Tina D. 2011-11-30 15:30:30

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.

@Phil LaNasa 2013-07-29 15:27:40

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

@Florian Grell 2013-03-12 10:29:25

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.

@mikevoermans 2016-05-01 02:21:28

Great solution where you want to restrict styling/formatting in very specific location.

@Jay 2013-02-14 07:56:46

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

@Holger 2014-10-23 12:22:00

This is also the fix I ended up using and it work very well and is quite simple.

@stephanfriedrich 2015-01-07 10:50:35

This isnt a good Answer, because you generate willful bad HTML.

@Vincent Tobiaz 2012-06-13 18:38:42

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.

@benzado 2012-06-13 22:05:29

Looks to me like this sets the color explicitly. In other words, it will be gray no matter what.

@Paul D. Waite 2014-03-30 17:59:52

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

@jww 2014-09-13 09:41:21

The question is about suppressing detection of phone numbers, not mailing addresses.

@someone else 2012-01-25 19:16:36

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

@catshow 2011-04-05 20:18:21

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;

@iandotkelly 2011-08-26 01:21:21

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!!

@yodaisgreen 2011-06-14 19:53:09

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>

@JustJohn 2011-12-13 23:28:29

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.

@Simon Darby 2014-11-29 02:01:45

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.

@Alan M. 2011-09-05 08:14:56

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.

@mhenry1384 2011-05-18 15:54:48

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

@Geert 2011-07-29 11:17:46

Unfortunately, in Internet Explorer I get those broken image icons. Adding width="0" height="0" helps, but still a single pixel is displayed.

@Radek Pech 2015-01-05 14:50:07

You don't need images, just put any HTML inside the number: <p>Not a phone: 112<span>34</span>56</p>

@HelpNeeder 2016-01-08 15:23:48

@Geert, set line-height and font-size to zero.

@mattstuehler 2011-04-26 22:11:49

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.

@mhenry1384 2011-05-18 15:40:58

The span idea sounded slick but it didn't work for me.

@Paul D. Waite 2014-03-30 17:57:49

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

@Jonah 2016-05-11 16:05:29

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.

@BobFromBris 2010-08-09 06:48:37

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.

@Paul D. Waite 2010-08-09 22:11:51

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.

@BobFromBris 2010-08-10 07:59:16

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

@mhenry1384 2011-05-18 15:38:13

You should remove your answer, since it doesn't work. As you yourself acknowledge in the above comment.

@geedubb 2013-11-07 12:14:30

@Bob Nice clean tip. We had issues with HTML in an email. Wrapping in a label worked nicely +1, thanks

@Chuck 2008-10-22 15:18:03

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

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

@Diodeus - James MacFarlane 2008-10-22 15:14:28

You could try encoding them as HTML entities:

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

@plindberg 2013-02-04 17:20:39

Doesn’t work. iOS apparently detects this after rendering.

Related Questions

Sponsored Content

5 Answered Questions

[SOLVED] How do you disable phone number detection in mobile safari

14 Answered Questions

[SOLVED] How to launch Safari and open URL from iOS app

  • 2012-09-14 00:01:31
  • Dale Dietrich
  • 208017 View
  • 209 Score
  • 14 Answer
  • Tags:   ios url mobile-safari

33 Answered Questions

[SOLVED] Disable Auto Zoom in Input "Text" tag - Safari on iPhone

14 Answered Questions

[SOLVED] How do you disable viewport zooming on Mobile Safari?

10 Answered Questions

[SOLVED] How to check if an app is installed from a web-page on an iPhone?

3 Answered Questions

[SOLVED] jQTouch: How to make phone number link trigger phone app?

  • 2011-01-28 23:37:57
  • Andrew
  • 2076 View
  • 1 Score
  • 3 Answer
  • Tags:   iphone jqtouch

1 Answered Questions

Disable phone number parsing in iPhone email subject

  • 2012-11-05 20:36:07
  • dherman
  • 292 View
  • 0 Score
  • 1 Answer
  • Tags:   iphone email

1 Answered Questions

How to disable iPhone Safari to launch the Maps application

1 Answered Questions

[SOLVED] How to avoid hyper link detect on safari?

Sponsored Content