How do you disable phone number detection in mobile safari - iphone

I have tried to disable phone number detection in safari for my web app but it still shows 7 character strings comprised of numbers as phone numbers. I used the apple provided meta tag but no joy.
<meta name="format-detection" content="telephone=no">
Anyone else run into this problem and work around it?
Thanks.
Update: It looks like it does not detect phone numbers in safari but rather when I save the page as an icon and run it from the home screen.


Are you loading this in a UIWebView? If so, you need to set the property for dataDetectorTypes. e.g:
webView.dataDetectorTypes = UIDataDetectorTypeNone
Valid detector types are here.
Search for UIWebView on apple's site for a description of how to set the property there.
-Kevin


We had a similar problem on our JQM/Cordova app. We had a calculator built into the app and whenever the amount was more than seven digits the data would be in blue with an underline underneath and when you click on the data a pop up appeared and gave you the option to call. We simply added
the meta tag as described in the opening question & it worked.
Just adding some thought here in case anybody else has a similar issue with Safari detecting 7 stringed data as telephone numbers.


OK. After quite a bit of futzing I think I found a strange work around. The problem with using dataDetectorTypes is that it will disable phone number detection for the whole uiwebveiw.
After trying datadetectors="off" and x-apple-data-detectors="false" attribute on span and a tags I finally stumbled on something that seems to prevent phone number detection.
If I wrap my text in an a tag with an href="#" apple seems to leave it alone.


Try this Code,
webView.dataDetectorTypes = UIDataDetectorTypeNone;
This may help you.


Try and add this to YourProjectAppDelegate.m
// ...
- (void)webViewDidStartLoad:(UIWebView *)theWebView
{
theWebView.dataDetectorTypes = UIDataDetectorTypeAll ^ UIDataDetectorTypePhoneNumber;
return [ super webViewDidStartLoad:theWebView ];
}
// ...
Did the trick for me..

Related

Unity WebGL Mobile browser workaround and keyboard input fix?

Hey everyone so I read that unity doesn't really support mobile browsers for WebGL games. im using 2020.1.4.And sure enough, the game gets a bit distorted by not being scaled properly. it's like the camera is bigger so it shows on the screen that blue color. I tried some things, setting width and height to auto or removing config.devicePixelRatio = 1; as suggested by a friend but nope! still looks horrible! And if that wasn't enough the keyboard doesn't show up when clicking on form fields. i tried this one
https://github.com/eforerog/keyboardMobileWebGLUnity
which displayed an error when pressed on and this one
https://github.com/dantasulisses/WebMobileInputFix which just didn't even compile!
Any ideas, please?

I did my research and tried every plugin I could find. I used Unity 2020.3.28f1 and tested both on Android-phone and iPhone.Here is my report.
These plugins don't work:
https://unitylist.com/p/f58/Unity-webgl-inputfield
https://github.com/eforerog/keyboardMobileWebGLUnity
https://github.com/dantasulisses/WebMobileInputFix
This plugin works, but you should use different settings for IOS and Android on same input field game object. If you use "prompt", it works for IOS only, and "overlay" works for Android only. Look for documentation in page:
https://github.com/unity3d-jp/WebGLNativeInputField
And this plugin works best at the moment. Yes, it is a bit ugly though, but it works.
https://github.com/kou-yeung/WebGLInput
And there is a fix for Unity 2021 for it:
https://github.com/kou-yeung/WebGLInput/releases/tag/1.0

There's a keyboard that overlays, when using it you just need to tap the notification to access it and then click the "back" button to hide it https://play.google.com/store/apps/details?id=com.fishstix.gameboard

I made this project that simply recreates a keyboard using buttons in unity.
I implemented it in a WebGL build successfully.
https://github.com/thetimeste/WebGL-Build-Keyboard-Unity.git

I would recommend using the native js window.prompt() fields as of writing. They have great cross-platform support, allow for extra features like special characters, emojis, copy and paste etc. and are pretty easy to set up. Once (or honestly if ever) Unity adds their own reliable implementation you can easily remove this lightweight implementation.
Create a .jslib file that has a function opening a window.prompt(description, currentText)
Return the result at the end of that function back to a unity object with a recipient script
Make a derivation from Unity's event system overwriting the OnApplicationFocus(bool focus) function (leaving it empty), to fix a sneaky Chrome Android bug.
That's it. The result should look something like in this demo: https://pop.demo.neoludic.games
If you want to save some development time on a feature that really should just be native in Unity, you can also check out my plugin based on the method above. https://neoludic-games.itch.io/pop-input

I also need to enable mobile virtual keyboard for running webgl on mobile device.
I've tried the code from your mentioned url. It gives you some idea on how to do
it, but the code are totally buggy and unusable. Now I am trying to implement it
by myself.

Prevent UIWebView from making 7 numbers into a hyperlink

I put some data in a UIWebView and as part of my data, I have 7 numbers together. The UIWebView makes the text be a hyperlink with the option to add to contact or copy the link. Is there a way to disable that so the 7 numbers don't appear as a phone number?

A quick Google turns up the UIWebView docs, which say that you can alter the dataDetectorTypes property to disable this behavior. The possible values are listed in the UIKit Data Types Reference - you may want UIDataDetectorTypeNone.

you can turn it off in HTML by add this meta in HTML:
<meta name="format-detection" content="telephone=no">
the document is here

iphone detect new style sheet

I am trying to trouble shoot a css issue that is appearing only in iphone browsers. I simply need to detect if the user is using an iphone, and if so, render a modified version of the div that is being affected.
I am happy to just call this modified version of the css div in the header as it will save having a second style sheet.
You used to be able to do it between browsers. It was especially good when rendering a IE6 fix.
Thanks for your help in advanced.
James

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
// do something
}

Why does UIWebView keep detecting phone numbers?

I have a UIWebView with detect phone numbers unchecked. However, it keeps underlining the numbers in this text:
Version: 2.1 3.19.2009
The text isn't in an anchor or anything. Is there a way to force the UIWebView to not detect phone numbers?

Try
webview.dataDetectorTypes = UIDataDetectorTypeNone;

It looks like there is a problem with Interface Builder's UIWebView attributes palette; the "Detects Phone Numbers" checkbox does not seem to have any affect. Examining the UIWebView's detectsPhoneNumbers property at runtime shows that it was not actually modified by IB.
For now, setting the detectsPhoneNumbers property in code to "NO" will work fine. The problem is only with the IB palette.
Unless we're both missing something, this is a bug. I'd suggest filing it at http://bugreport.apple.com/. Additionally, you can post it at http://openradar.appspot.com/ if you'd like to make it visible to other developers.

Swift 3+ programmatically
webView.dataDetectorTypes = []

[webview setDetectsPhoneNumbers:NO];
It will work for you.....

How to disable phone number linking in Mobile Safari?

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?

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.

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

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.

Add this, I think it is what you're looking for:
<meta name = "format-detection" content = "telephone=no">

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;

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.

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

You can also use the <a> label with javascript: void(0) as href value. Example as follow:+44 456 77 89 87

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.

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.

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

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

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.

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-800<span>-</span>620<span>-</span>3803

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

<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

You could try encoding them as HTML entities:
0 = 0
9 = 9

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

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.

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.

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

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.

Break the number down into separate blocks of text
301 <div style="display:inline-block">441</div> 3909

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.