Comment désactiver la liaison de numéro de téléphone dans le Safari Mobile?
Safari sur iPhone crée automatiquement des liens pour les chaînes de chiffres qui apparaissent aux numéros de téléphone. J'écris une page Web contenant une adresse IP, et Safari en fait un lien de numéro de téléphone. Est-il possible de désactiver ce comportement d'une page ou d'un élément sur une page?
24 réponses
cela semble être la bonne chose à faire, selon le référence HTML Safari :
<meta name="format-detection" content="telephone=no">
si vous désactivez cette option mais que vous voulez toujours des liens téléphoniques, vous pouvez toujours utiliser le système URI" tel".
Voici la page pertinente à la bibliothèque des développeurs Apple.
j'avais le même problème. J'ai trouvé une propriété sur L'UIWebView qui vous permet d'éteindre les détecteurs de données.
self.webView.dataDetectorTypes = UIDataDetectorTypeNone;
pour désactiver l'apparence de parsing du téléphone pour des éléments spécifiques, ce CSS semble faire l'affaire:
.element { pointer-events: none; }
.element > a { text-decoration:none; color:inherit; }
la première règle désactive le clic, la seconde s'occupe du style.
ajouter ceci, je pense que c'est ce que vous cherchez:
<meta name = "format-detection" content = "telephone=no">
j'utilise un menuisier de largeur zéro ‍
Juste mis quelque part le numéro de téléphone et ça marche pour moi. Testé dans BrowserStack (et Litmus pour les e-mails).
Solution pour Webview!
pour les applications PhoneGap-iPhone / PhoneGap-iOS, vous pouvez désactiver la détection des numéros de téléphone en ajoutant ce qui suit à l'application de votre délégué de projet:
// ...
- (void)webViewDidStartLoad:(UIWebView *)theWebView
{
// disable telephone detection, basically <meta name="format-detection" content="telephone=no" />
theWebView.dataDetectorTypes = UIDataDetectorTypeAll ^ UIDataDetectorTypePhoneNumber;
return [ super webViewDidStartLoad:theWebView ];
}
// ...
source: Désactiver la Détection Téléphonique dans PhoneGap-iOS .
pense que j'ai trouvé une solution: mettre le numéro dans un élément <label>
. Je n'ai pas essayé d'autres tags, mais <div>
l'a laissé actif sur l'écran d'accueil, même avec l'attribut telephone=no
.
il semble évident d'après les commentaires antérieurs que la balise meta a fonctionné, mais pour une raison quelconque s'est cassée sous les versions ultérieures d'iOS, au moins sous certaines conditions. Je suis en cours d'exécution 4.0.1.
pour désactiver la détection du numéro de téléphone sur une partie d'une page, envelopper le texte affecté dans une étiquette d'ancrage avec href="#". Si vous faites cela, mobile Safari et UIWebView devrait le laisser tranquille.
<a href="#"> 1234567 </a>
j'ai eu le MÊME PROBLÈME, MAIS sur une application web iPad.
malheureusement, ni l'un ni l'autre...
<meta name = "format-detection" content = "telephone=no">
ni ...
0 = 0
9 = 9
... travaillé.
Mais, voici trois vilains hacks:
- en remplaçant le numéro "0" par la lettre " O
- remplaçant le numéro "1" par la lettre "l
- ajouter une portée sans signification: p.ex.,
555.5<span>5</span>5.5555
, Selon la police que vous utilisez, les deux premiers sont à peine perceptibles. Ce dernier implique évidemment du code superflu, mais est invisible pour l'utilisateur.
Encombrants de hacks pour sûr, et sans doute pas viable si vous êtes de la génération de votre code dynamiquement à partir de données, ou si vous ne pouvez pas polluer vos données de cette façon.
mais, suffisant dans un pincement.
j'ai eu un ABN (numéro D'entreprise Australien) que iPad Safari a insisté pour transformer en un lien de numéro de téléphone. Aucune des suggestions n'a aidé. Ma solution était de mettre des étiquettes img entre les numéros.
ABN 98<img class="PreventSafariFromTurningIntoLink" /> 009<img /> 675<img /> 709
la classe n'existe que pour documenter à quoi servent les étiquettes img.
fonctionne sur iPad 1 (4.3.1) et iPad 2 (4.3.3).
mon expérience est la même que celle de certains autres. La balise meta...
<meta name = "format-detection" content = "telephone=no">
...fonctionne lorsque le site web est lancé dans un Safari Mobile (i.e., avec chrome) mais cesse de fonctionner lorsqu'il est lancé sous forme d'application web (i.e., est sauvegardé sur l'écran d'accueil et fonctionne sans chrome).
ma solution moins qu'idéale est d'insérer les valeurs dans les champs d'entrée...
<input type="text" readonly="readonly" style="border:none;" value="3105551212">
c'est moins qu'idéal parce que, malgré la frontière étant fixée à aucun, iOS rend une barre grise multi-pixel au-dessus du champ. Mais, c'est mieux que de voir le nombre un lien.
vous pouvez également utiliser l'étiquette <a>
avec javascript: void(0)
comme valeur href
.
Exemple à suivre:
<a href="javascript: void(0)">+44 456 77 89 87</a>
j'ai testé moi-même et trouve qu'il fonctionne bien qu'il n'est certainement pas une solution élégante. L'insertion d'une portée vide dans le numéro de téléphone empêchera les détecteurs de données de le transformer en lien.
(604) 555<span></span> -4321
<meta name = "format-detection" content = "telephone=no">
ne fonctionne pas pour les e-mails: si le HTML que vous préparez est pour un e-mail, la métabalise sera ignorée.
si ce que vous ciblez sont des e-mails, voici encore une autre solution moche-mais-fonctionne pour ya'll:
exemple de quelque HTML que vous voulez éviter d'être lié ou auto formaté:
will cease operations <span class='ios-avoid-format'>on June 1,
2012</span><span></span>.
et les CSS qui feront la magie se produire:
@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";}
}
L'inconvénient: vous pouvez besoin d'une requête multimédia pour chacun des combinaisons iPad / iphone portrait /landscape
vous pouvez essayer de les encoder comme des entités HTML:
0 = 0
9 = 9
même problème dans L'application Sencha Touch résolu avec la balise meta ( <meta name="format-detection" content="telephone=no">
) dans l'index.html de l'application.
Cette réponse l'emporte sur tout comme de 6-13-2012:
<a href="#" style="color: #666666;
text-decoration: none;
pointer-events: none;">
Boca Raton, FL 33487
</a>
changez la couleur pour ce qui correspond à votre texte, la décoration du texte supprime le soulignement, les événements pointeur l'empêche d'être vu comme un lien dans un navigateur (pointeur ne change pas à une main)
c'est parfait pour les e-mails HTML sur ios et le navigateur.
une astuce que j'utilise qui fonctionne sur plus que juste un Safari Mobile est d'utiliser des codes HTML escape et une petite marge dans le numéro de téléphone. Cela rend plus difficile pour le navigateur à "identifier" un numéro de téléphone, c'est à dire
Phone: 1-800<span>-</span>620<span>-</span>3803
Pourquoi voulez-vous supprimer la liaison, c'est très convivial avoir ème eoption.
si vous voulez simplement supprimer l'édition automatique, mais garder le lien fonctionnel, il suffit d'ajouter ceci dans votre CSS...
a[href^=tel] {
color: inherit;
text-decoration:inherit;
}
j'ai aussi ce problème: Safari et d'autres navigateurs mobiles transforment les codes TVA en Numéros de téléphone. Donc je veux une méthode propre pour l'éviter sur un seul élément, pas la page entière (ou site).
Je partage une solution possible que j'ai trouvé, il est sous-optimal mais il est quand même assez viable: je mets, à l'intérieur du nombre Je ne veux pas devenir un tel:
lien, le ⁠
entité HTML qui est le mot-Menuisier caractère invisible . J'ai essayé pour rester plus sémantique (bien, au moins une sorte de) en mettant ce caractère dans une certaine place de sens, par exemple pour le numéro de TVA, j'ai choisi de le mettre entre les différents groupes de chiffres selon son format donc pour une TVA italienne j'ai écrit: 0613605⁠048⁠8
qui rend en 06136050488 et il n'est pas transformé en numéro de téléphone.
une autre option est de remplacer les traits d'Union dans votre numéro de téléphone par le caractère ‑
(U+2011 'Unicode non-Breaking tiret')
j'ai été vraiment confus par cela pendant un certain temps mais finalement compris. Nous avons fait des mises à jour de notre site et avons eu quelques nombres convertissant en un lien et certains n'étaient pas. Il s'avère que les nombres ne seront pas convertis en lien s'ils sont dans un
décomposer le nombre en blocs de texte séparés
301 <div style="display:inline-block">441</div> 3909
une autre solution serait d'utiliser une image du numéro IP