How to disable phone number linking in Mobile Safa

问题:

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?

回答1:

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.

回答2:

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.

回答3:

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;

回答4:

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

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

回答5:

I use a zero-width joiner ‍

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

回答6:

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.

回答7:

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>

回答8:

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.

回答9:

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

Example as follow:
<a href=\"javascript: void(0)\">[phone]</a>

回答10:

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

Unfortunately, neither...

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

nor ...

0 = 0
9 = 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.

回答11:

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

回答12:

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.

回答13:

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

回答14:

<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

回答15:

You could try encoding them as HTML entities:

0 = 0
9 = 9

回答16:

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

回答17:

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.

回答18:

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

回答19:

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.

回答20:

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

回答21:

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.

回答22:

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

回答23:

Break the number down into separate blocks of text

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

回答24:

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