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?

See also http://stackoverflow.com/questions/3649702/how-do-you-dissable-phone-number-detection-in-mobile-safari — jrummell, Dec 13 '11 at 18:29

score 797 · Accepted Answer · edited Apr 06 '18 at 00:17

797

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 06 '18 at 00:17

Scott Hoffman

547
7
21

answered Oct 22 '08 at 19:36

lewinski

8,115
1
16
5

2

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

4.2.1 on iPhone works; http://developer.apple.com/library/ios/#featuredarticles/iPhoneURLScheme_Reference/Articles/PhoneLinks.html – Mark Brackett May 27 '11 at 20:22
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 – somewhatsapient Jun 17 '11 at 03:37
Can you do this on per element basis instead of turning it off for the entire page? – pixelfreak Jul 20 '12 at 23:26
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 '12 at 21:34
Does anyone know how to do this for emails? – Oliver Tappin Jun 11 '13 at 15:29
Works nicely in my Cordova 3.3.1-0.1.2 based project! using tel indeed lets you still recognize a phone number. +1 – EeKay Feb 19 '14 at 09:16
Works on Safari Mobile on iPad and iPhone running on iOS 7.x – Christopher King Apr 30 '14 at 14:32
Note that this does not work if you insert the `` tag with JavaScript (at least on iOS 7.1). The tag has to be in the HTML when the browser downloads it. – craigpatik Jun 06 '14 at 19:54
1

@Titanium This `` trick works fine for the mail app on iOS 7.1.2. Just insert `` tag into the `` tag in your HTML mail. Please note that we cannot apply this trick to text/plain based mails. – t_motooka Sep 03 '14 at 08:35
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 '15 at 19:01
@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. – BoffinBrain Aug 05 '15 at 15:40
Thanks. This works on ionic as well, put it in index page. – sulaiman sudirman Oct 09 '15 at 14:11
Works well, also works for React Native WebView components (which are basically Safari wrappers I suppose anyway) – natee.biz Dec 13 '17 at 01:03
4

This works perfectly fine under IOS 12 in 2019! – Matt Komarnicki Apr 05 '19 at 01:05
This works for Safari—but what’s the fix for Chrome and Firefox? – 2540625 Aug 24 '21 at 21:30
This did not work for me on an iPhone 13 running iOS 15.6.1. Instead, I wrapped the numbers in a `` tag and that stopped it. – dev_willis Sep 16 '22 at 14:56
Does not work on 2023 – Daniel Benedykt May 19 '23 at 11:29

score 64 · Answer 2 · answered Apr 20 '16 at 03:15

64

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 '16 at 03:15

stickyuser

2,552
15
15

1

This works for me. I just add it before the first number. – vinboxx May 27 '16 at 04:10
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. – Nick Jun 16 '17 at 12:38
1

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

This is the only workable solution if you're asking Mobile Safari to load an XML file that uses an 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 '18 at 19:36
AWESOME: zero-width joiner ‍ 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... ‍345‍456‍789 – JKM Oct 01 '19 at 01:08
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 '21 at 23:13

score 50 · Answer 3 · answered Mar 12 '13 at 10:29

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 '13 at 10:29

Florian Grell

995
7
18

5

Great solution where you want to restrict styling/formatting in very specific location. – mikevoermans May 01 '16 at 02:21
This is the best solution, IMO, since it doesn't require making any modifications to the HTML. – kmgdev May 14 '21 at 20:07
Thank you. Applied for Brave Browser on iOS – Nguyễn Văn Vinh Aug 04 '21 at 15:50
doesn't work in iOs 14 and 13 at least not when it's not a link – OZZIE Sep 07 '21 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 '22 at 12:50

score 34 · Answer 4 · answered Oct 22 '08 at 15:18

34

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

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

answered Oct 22 '08 at 15:18

score 33 · Answer 5 · edited Dec 14 '11 at 20:08

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 '11 at 20:08

animuson

53,861
28
137
147

answered Apr 05 '11 at 20:18

catshow

331
3
2

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 '11 at 01:21

score 10 · Answer 6 · edited Feb 05 '14 at 18:02

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 05 '14 at 18:02

TRiG

10,148
7
57
107

answered Oct 15 '11 at 13:45

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 '11 at 15:30

score 9 · Answer 7 · edited Dec 13 '11 at 23:47

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 '11 at 23:47

JustJohn

361
1
7

answered Jun 14 '11 at 19:53

yodaisgreen

2,310
3
22
27

1

This is what I ended up doing since the `meta` tag didn't work. However, it's probably better done with `` to prevent side effects from a URL change. – JustJohn Dec 13 '11 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 '14 at 02:01
This worked great for me for some hidden javascript numbers I needed that safari was interpreting as phone numbers, thanks! – jsmars Jan 21 '21 at 11:11

score 7 · Answer 8 · answered Jun 25 '15 at 15:04

7

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 '15 at 15:04

diazwatson

121
5
12

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

BobFromBris · Answer 9 · 2010-08-10T20:16:14.223

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 '10 at 20:16

answered Aug 09 '10 at 06:48

BobFromBris

261
4
6

Hi Bob. If you want to put in HTML code examples, you have to wrap the code in backticks, ``. (Stack Overflow uses a formatting language called Markdown.) I’ll edit your answer accordingly. – Paul D. Waite Aug 09 '10 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 '10 at 07:59
You should remove your answer, since it doesn't work. As you yourself acknowledge in the above comment. – mhenry1384 May 18 '11 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 07 '13 at 12:14

score 6 · Answer 10 · answered Sep 05 '11 at 08:14

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.

score 4 · Answer 11 · answered Feb 14 '13 at 07:56

4

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 '13 at 07:56

Jay

1,086
11
25

1

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

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

The simplest solution, thank you, Jay! – Anton Shtin Sep 16 '22 at 05:00

score 4 · Answer 12 · answered May 18 '11 at 15:54

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 '11 at 15:54

mhenry1384

7,538
5
55
74

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 '11 at 11:17
1

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

score 2 · Answer 13 · edited Mar 30 '14 at 17:56

<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

score 2 · Answer 14 · answered Jul 29 '13 at 15:27

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

mattstuehler · Answer 15 · 2011-04-26T22:17:14.503

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.

edited Apr 26 '11 at 22:17

answered Apr 26 '11 at 22:11

mattstuehler

9,040
18
78
108

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](https://developer.apple.com/technologies/ios/accessibility.html). Then it’d be pretty noticeable. – Paul D. Waite Mar 30 '14 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 '16 at 16:05

score 1 · Answer 16 · edited Jun 13 '12 at 19:20

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 '12 at 19:20

Pavel Strakhov

39,123
5
88
127

answered Jun 13 '12 at 18:38

Vincent Tobiaz

126
1
3

1

Looks to me like this sets the color explicitly. In other words, it will be gray no matter what. – benzado Jun 13 '12 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](http://caniuse.com/#feat=pointer-events). – Paul D. Waite Mar 30 '14 at 17:59
The question is about suppressing detection of phone numbers, not mailing addresses. – jww Sep 13 '14 at 09:41

score 1 · Answer 17 · answered Mar 24 '14 at 09:45

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 '14 at 09:45

Marc

45
3

9

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 '14 at 17:39
1

The question is about link detection on telephone numbers, not editing them. – jww Sep 13 '14 at 09: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 01 '18 at 18:59
he does not want to have ip addresses linked as phone numbers – jahller Nov 15 '18 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 01 '20 at 12:43

score 1 · Answer 18 · answered Oct 22 '08 at 15:14

1

You could try encoding them as HTML entities:

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

answered Oct 22 '08 at 15:14

Diodeus - James MacFarlane

112,730
33
157
176

score 1 · Answer 19 · edited May 23 '17 at 12:02

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.

score 1 · Answer 20 · answered Apr 29 '16 at 01:14

1

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

answered Apr 29 '16 at 01:14

Daniel

4,051
2
28
46

score 1 · Answer 21 · answered Jun 09 '16 at 09:42

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.

score 1 · Answer 22 · answered Mar 10 '23 at 19:11

1

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

wkWebView.configuration.dataDetectorTypes  = []

answered Mar 10 '23 at 19:11

JoeGalind

3,545
2
29
33

score 1 · Answer 23 · edited Jan 25 '12 at 19:37

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 '12 at 19:37

animuson

53,861
28
137
147

answered Jan 25 '12 at 19:16

someone else

19
1

score 0 · Answer 24 · answered Jul 05 '16 at 22:20

0

Break the number down into separate blocks of text

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

answered Jul 05 '16 at 22:20

Kareem

5,068
44
38

3

You might want to mention that this is a workaround. – Daan Jul 03 '18 at 12:45

score 0 · Answer 25 · answered Sep 16 '22 at 15:09

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.

How to disable phone number linking in Mobile Safari?

25 Answers25

Solution for Webview!

Linked

Related