How to disable phone number linking in Mobile Safari?

P

25

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?

Perfecto answered 22/10, 2008 at 15:0 Comment(2)

See also #3650202 – Pops 13/12, 2011 at 18:29

I

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.

Invertase answered 22/10, 2008 at 19:36 Comment(18)

This simply doesn't work. Not for web apps on iOS 4.3.1 anyway. – Stefaniestefano 18/5, 2011 at 15:37

4.2.1 on iPhone works; developer.apple.com/library/ios/#featuredarticles/… – Memorabilia 27/5, 2011 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 – Amortize 17/6, 2011 at 3:37

Can you do this on per element basis instead of turning it off for the entire page? – Bickering 20/7, 2012 at 23:26

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

Does anyone know how to do this for emails? – Colby 11/6, 2013 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 – Poise 19/2, 2014 at 9:16

Works on Safari Mobile on iPad and iPhone running on iOS 7.x – Compline 30/4, 2014 at 14:32

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. – Achromatism 6/6, 2014 at 19:54

@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. – Culicid 3/9, 2014 at 8:35

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? – Othaothe 22/6, 2015 at 19:1

@Othaothe 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. – Victory 5/8, 2015 at 15:40

Thanks. This works on ionic as well, put it in index page. – Surrender 9/10, 2015 at 14:11

Works well, also works for React Native WebView components (which are basically Safari wrappers I suppose anyway) – Smocking 13/12, 2017 at 1:3

This works perfectly fine under IOS 12 in 2019! 👍🏻 – Footage 5/4, 2019 at 1:5

This works for Safari—but what’s the fix for Chrome and Firefox? – Tichonn 24/8, 2021 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 <code> tag and that stopped it. – Diner 16/9, 2022 at 14:56

Does not work on 2023 – Ko 19/5, 2023 at 11:29

S

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

Siam answered 20/4, 2016 at 3:15 Comment(7)

This works for me. I just add it before the first number. – Landgrabber 27/5, 2016 at 4: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. – Pull 16/6, 2017 at 12:38

Neat solution. Worked fine on iPhone 6S(+)/iOS 9. – Topology 9/10, 2017 at 21:19

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 (!). – Danelaw 13/3, 2018 at 19:36

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 – Mackinnon 1/10, 2019 at 1:8

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. – Buttonhook 19/1, 2021 at 23:13

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

I

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.

Immesh answered 12/3, 2013 at 10:29 Comment(5)

Great solution where you want to restrict styling/formatting in very specific location. – Scrimpy 1/5, 2016 at 2:21

This is the best solution, IMO, since it doesn't require making any modifications to the HTML. – Pox 14/5, 2021 at 20:7

Thank you. Applied for Brave Browser on iOS – Khudari 4/8, 2021 at 15:50

doesn't work in iOs 14 and 13 at least not when it's not a link – Deakin 7/9, 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! – Sufism 22/9, 2022 at 12:50

P

36

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

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

Prepay answered 22/10, 2008 at 15:18 Comment(0)

V

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;

Vicarious answered 5/4, 2011 at 20:18 Comment(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!! – Margalit 26/8, 2011 at 1:21

C

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.

Crockery answered 15/10, 2011 at 13:45 Comment(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. – Fabio 30/11, 2011 at 15:30

B

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>

Backing answered 14/6, 2011 at 19:53 Comment(3)

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. – Turin 13/12, 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. – Prato 29/11, 2014 at 2:1

This worked great for me for some hidden javascript numbers I needed that safari was interpreting as phone numbers, thanks! – Trilobate 21/1, 2021 at 11:11

C

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>

Confiscatory answered 25/6, 2015 at 15:4 Comment(1)

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

C

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.

Circassian answered 9/8, 2010 at 6:48 Comment(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. – Relational 9/8, 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." – Circassian 10/8, 2010 at 7:59

You should remove your answer, since it doesn't work. As you yourself acknowledge in the above comment. – Stefaniestefano 18/5, 2011 at 15:38

@Bob Nice clean tip. We had issues with HTML in an email. Wrapping in a label worked nicely +1, thanks – Footgear 7/11, 2013 at 12:14

C

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.

Credits answered 5/9, 2011 at 8:14 Comment(0)

B

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

Bareback answered 14/2, 2013 at 7:56 Comment(3)

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

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

The simplest solution, thank you, Jay! – Greenquist 16/9, 2022 at 5:0

S

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

Stefaniestefano answered 18/5, 2011 at 15:54 Comment(3)

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

You don't need images, just put any HTML inside the number: Not a phone: 1123456 – Rosalba 5/1, 2015 at 14:50

@Geert, set line-height and font-size to zero. – Pachisi 8/1, 2016 at 15:23

S

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.

Skurnik answered 26/4, 2011 at 22:11 Comment(2)

“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. – Relational 30/3, 2014 at 17:57

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. – Metagenesis 11/5, 2016 at 16:5

K

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

Knurly answered 1/5, 2012 at 17:14 Comment(0)

K

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

Kerby answered 29/7, 2013 at 15:27 Comment(0)

T

1

You could try encoding them as HTML entities:

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

Transposition answered 22/10, 2008 at 15:14 Comment(0)

K

1

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

Knocker answered 25/1, 2012 at 19:16 Comment(0)

L

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.

Linders answered 13/6, 2012 at 18:38 Comment(3)

Looks to me like this sets the color explicitly. In other words, it will be gray no matter what. – Perfecto 13/6, 2012 at 22:5

“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. – Relational 30/3, 2014 at 17:59

The question is about suppressing detection of phone numbers, not mailing addresses. – Sanity 13/9, 2014 at 9:41

J

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

Jokester answered 24/3, 2014 at 9:45 Comment(5)

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 – Hindrance 10/7, 2014 at 17:39

The question is about link detection on telephone numbers, not editing them. – Sanity 13/9, 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. – Durban 1/11, 2018 at 18:59

he does not want to have ip addresses linked as phone numbers – Loehr 15/11, 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 – Nydianye 1/12, 2020 at 12:43

A

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

Assignment answered 12/6, 2015 at 13:32 Comment(0)

B

1

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

Brimful answered 29/4, 2016 at 1:14 Comment(0)

G

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.

Garrulity answered 9/6, 2016 at 9:42 Comment(0)

D

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.

Diner answered 16/9, 2022 at 15:9 Comment(0)

C

1

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

wkWebView.configuration.dataDetectorTypes  = []

Chordate answered 10/3, 2023 at 19:11 Comment(0)

H

0

Break the number down into separate blocks of text

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

Haim answered 5/7, 2016 at 22:20 Comment(1)

You might want to mention that this is a workaround. – Spinifex 3/7, 2018 at 12:45

Solution for Webview!

Recommended topics

Hot tags