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

User · Answer

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  lt meta name  format-detection  content  telephone no    gt      theWebView dataDetectorTypes   UIDataDetectorTypeAll   UIDataDetectorTypePhoneNumber       return   super webViewDidStartLoad theWebView                source  Disable Telephone Detection in PhoneGap-iOS

User · Answer

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  amp  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 amp  8288 048 amp  8288 8 which renders in 0613605  8288 048  8288 8 and it is not transformed in a telephone number

User · Answer

You can also use the  lt a gt  label with javascript  void 0  as href value  Example as follow  lt a href  javascript  void 0   gt  44 456 77 89 87 lt  a gt

User · Answer

I use a zero-width joiner  amp zwj   Just put that somewhere in the phone number and it works for me  Tested in BrowserStack  and Litmus for emails

User · Answer

You could try encoding them as HTML entities    amp  48    0  amp  57    9

User · Answer

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     lt a href     gt  1234567  lt  a gt

User · Answer

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

User · Answer

To disable the phone parsing appearance for specific elements  this CSS seems to do the trick    element   pointer-events  none     element  gt  a   text-decoration none  color inherit      The first rule disables the click  the second takes care of the styling

User · Answer

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 lt span gt  lt  span gt  -4321

User · Answer

Think I ve found a solution  put the number inside a  lt label gt  element  Haven t tried any other tags  but  lt div gt  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

User · Answer

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

User · Answer

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 amp  48  amp  48  lt span gt - lt  span gt 62 amp  48  lt span gt - lt  span gt 38 amp  48 3

User · Answer

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 lt span gt  lt  span gt  -4321

User · Answer

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 lt img class  PreventSafariFromTurningIntoLink    gt  009 lt img   gt  675 lt img   gt  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

User · Answer

Add this  I think it is what you re looking for    lt meta name    format-detection  content    telephone no  gt

User · Answer

Add this  I think it is what you re looking for    lt meta name    format-detection  content    telephone no  gt

User · Answer

You could try encoding them as HTML entities    amp  48    0  amp  57    9

User · Answer

I had the same problem  but on an iPad web app   Unfortunately  neither       lt meta name    format-detection  content    telephone no  gt    nor       amp  48    0  amp  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 lt span gt 5 lt  span gt 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

User · Answer

This seems to be the right thing to do  according to the Safari HTML Reference    lt meta name  format-detection  content  telephone no  gt    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

User · Answer

Think I ve found a solution  put the number inside a  lt label gt  element  Haven t tried any other tags  but  lt div gt  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

User · Answer

This seems to be the right thing to do  according to the Safari HTML Reference    lt meta name  format-detection  content  telephone no  gt    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

User · Answer

lt meta name    format-detection  content    telephone no  gt  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  lt span class  ios-avoid-format  gt on June 1  2012 lt  span gt  lt span gt  lt  span gt     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

User · Answer

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

User · Answer

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  lt fieldset gt   Obviously not the right solution for most circumstances  but in some it will be the right one

User · Answer

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

User · Answer

My experience is the same as some others mentioned  The meta tag      lt meta name    format-detection  content    telephone no  gt       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      lt input type  text  readonly  readonly  style  border none   value  3105551212  gt    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

User · Answer

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     lt a href     gt  1234567  lt  a gt

User · Answer

Break the number down into separate blocks of text  301  lt div style  display inline-block  gt 441 lt  div gt  3909

User · Answer

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 amp  48  amp  48  lt span gt - lt  span gt 62 amp  48  lt span gt - lt  span gt 38 amp  48 3

User · Answer

Break the number down into separate blocks of text  301  lt div style  display inline-block  gt 441 lt  div gt  3909

User · Answer

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  lt meta name  format-detection  content  telephone no    gt      theWebView dataDetectorTypes   UIDataDetectorTypeAll   UIDataDetectorTypePhoneNumber       return   super webViewDidStartLoad theWebView                source  Disable Telephone Detection in PhoneGap-iOS

User · Answer

Same problem in Sencha Touch app solved with meta tag   lt meta name  format-detection  content  telephone no  gt   in index html of app

User · Answer

Add this  I think it is what you re looking for    lt meta name    format-detection  content    telephone no  gt

User · Answer

To disable the phone parsing appearance for specific elements  this CSS seems to do the trick    element   pointer-events  none     element  gt  a   text-decoration none  color inherit      The first rule disables the click  the second takes care of the styling

User · Answer

You could try encoding them as HTML entities    amp  48    0  amp  57    9

User · Answer

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

User · Answer

You can also use the  lt a gt  label with javascript  void 0  as href value  Example as follow  lt a href  javascript  void 0   gt  44 456 77 89 87 lt  a gt

User · Answer

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  lt fieldset gt   Obviously not the right solution for most circumstances  but in some it will be the right one

User · Answer

This answer trumps everything as of 6-13-2012    lt a href     style  color   666666                      text-decoration  none                     pointer-events  none   gt    Boca Raton  FL 33487  lt  a gt    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

User · Answer

I use a zero-width joiner  amp zwj   Just put that somewhere in the phone number and it works for me  Tested in BrowserStack  and Litmus for emails

User · Answer

This seems to be the right thing to do  according to the Safari HTML Reference    lt meta name  format-detection  content  telephone no  gt    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

User · Answer

This seems to be the right thing to do  according to the Safari HTML Reference    lt meta name  format-detection  content  telephone no  gt    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

User · Answer

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

User · Answer

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 lt img class  PreventSafariFromTurningIntoLink    gt  009 lt img   gt  675 lt img   gt  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

User · Answer

You could try encoding them as HTML entities    amp  48    0  amp  57    9

User · Answer

My experience is the same as some others mentioned  The meta tag      lt meta name    format-detection  content    telephone no  gt       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      lt input type  text  readonly  readonly  style  border none   value  3105551212  gt    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

User · Answer

lt meta name    format-detection  content    telephone no  gt  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  lt span class  ios-avoid-format  gt on June 1  2012 lt  span gt  lt span gt  lt  span gt     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

User · Answer

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  amp  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 amp  8288 048 amp  8288 8 which renders in 0613605  8288 048  8288 8 and it is not transformed in a telephone number

User · Answer

Add this  I think it is what you re looking for    lt meta name    format-detection  content    telephone no  gt

User · Answer

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

User · Answer

This answer trumps everything as of 6-13-2012    lt a href     style  color   666666                      text-decoration  none                     pointer-events  none   gt    Boca Raton  FL 33487  lt  a gt    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

User · Answer

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

User · Answer

Same problem in Sencha Touch app solved with meta tag   lt meta name  format-detection  content  telephone no  gt   in index html of app

User · Answer

I had the same problem  but on an iPad web app   Unfortunately  neither       lt meta name    format-detection  content    telephone no  gt    nor       amp  48    0  amp  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 lt span gt 5 lt  span gt 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

[iphone] How to disable phone number linking in Mobile Safari?

Solution for Webview!

Examples related to iphone

Examples related to safari

Examples related to mobile-safari