Safari sur iPhone crée automatiquement des liens pour les chaînes de chiffres qui apparaissent sur les numéros de téléphone. J'écris une page Web contenant une adresse IP, et Safari en fait un lien vers un numéro de téléphone. Est-il possible de désactiver ce comportement pour une page entière ou un élément sur une page?
Cela semble être la bonne chose à faire, selon Safari HTML Reference :
<meta name="format-detection" content="telephone=no">
Si vous désactivez cette option mais souhaitez toujours des liaisons téléphoniques, vous pouvez toujours utiliser le schéma d'URI "tel".
Voici le page pertinente dans la bibliothèque des développeurs d’Apple.
Pour désactiver l'apparence d'analyse syntaxique 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.
J'avais le même problème. J'ai trouvé une propriété sur le UIWebView qui vous permet de désactiver les détecteurs de données.
self.webView.dataDetectorTypes = UIDataDetectorTypeNone;
Ajoutez ceci, je pense que c'est ce que vous cherchez:
<meta name = "format-detection" content = "telephone=no">
J'utilise un menuisier de largeur nulle ‍
Il suffit de mettre cela quelque part dans le numéro de téléphone et cela fonctionne pour moi. Testé dans BrowserStack (et Litmus pour les emails).
Pour les applications PhoneGap-iPhone/PhoneGap-iOS, vous pouvez désactiver la détection de numéro de téléphone en ajoutant les éléments suivants au délégué d’application de votre 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 du téléphone dans PhoneGap-iOS .
Pour désactiver la détection du numéro de téléphone sur une partie de page, placez le texte affecté dans une balise d'ancrage avec href = "#". Si vous faites cela, Safari mobile et UIWebView devraient le laisser seul.
<a href="#"> 1234567 </a>
Pensez que j'ai trouvé une solution: mettez le numéro dans un élément <label>
. Je n'ai pas essayé d'autres balises, mais <div>
l'a laissée active sur l'écran d'accueil, même avec l'attribut telephone=no
.
D'après les commentaires précédents, il semble évident que la méta-tag a bien fonctionné, mais pour une raison quelconque, elle est tombée en panne sous les versions ultérieures d'iOS, du moins dans certaines conditions. Je suis en cours d'exécution 4.0.1.
Vous pouvez également utiliser le libellé <a>
avec javascript: void(0)
comme valeur href
.
Exemple comme suit:<a href="javascript: void(0)">+44 456 77 89 87</a>
J'avais un numéro d'entreprise australien (ABN) sur lequel iPad Safari insistait pour devenir un lien vers un numéro de téléphone. Aucune des suggestions n'a aidé. Ma solution a été de mettre img tags entre les nombres.
ABN 98<img class="PreventSafariFromTurningIntoLink" /> 009<img /> 675<img /> 709
La classe n’existe que pour documenter l’utilité des balises img.
Fonctionne sur iPad 1 (4.3.1) et iPad 2 (4.3.3).
J'ai eu le même problème, mais sur une application web iPad.
Malheureusement, ni ...
<meta name = "format-detection" content = "telephone=no">
ni ...
0 = 0
9 = 9
... travaillé.
Mais, voici trois hacks laids:
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.
Kludgy pirate à coup sûr, et probablement pas viable si vous générez 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.
Mon expérience est la même que celle mentionnée par d’autres. La méta-tag ...
<meta name = "format-detection" content = "telephone=no">
... fonctionne lorsque le site Web est en cours d'exécution dans Mobile Safari (c'est-à-dire avec chrome) mais cesse de fonctionner lorsqu'il est exécuté en tant qu'application Web (c'est-à-dire qu'il est enregistré sur l'écran d'accueil et qu'il s'exécute sans chrome).
Ma solution moins qu'idéale est d'insérer les valeurs dans les champs de saisie ...
<input type="text" readonly="readonly" style="border:none;" value="3105551212">
Ce n'est pas idéal car, malgré le réglage de la bordure sur aucune, iOS restitue une barre grise de plusieurs pixels au-dessus du champ. Mais c'est mieux que de voir le nombre comme un lien.
<meta name = "format-detection" content = "telephone=no">
ne fonctionne pas pour les emails: si le HTML que vous préparez est un email, la métabalise sera ignorée.
Si vous ciblez des courriels, voici encore une autre solution moche mais qui fonctionne pour vous:
Exemple de code HTML pour lequel vous souhaitez éviter d'être lié ou formaté automatiquement:
will cease operations <span class='ios-avoid-format'>on June 1,
2012</span><span></span>.
Et le CSS qui fera la magie:
@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 aurez peut-être besoin d'une requête multimédia pour chacun des combos ipad/portrait iphone/paysage
J'ai testé cela moi-même et constaté que cela fonctionne bien que ce ne soit certainement pas une solution élégante. L'insertion d'une plage 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
Une astuce que j'utilise et qui fonctionne sur plus que Mobile Safari consiste à utiliser des codes d'échappement HTML et une petite majoration dans le numéro de téléphone. Cela rend plus difficile pour le navigateur d’identifier un numéro de téléphone, c.-à-d.
Phone: 1-800<span>-</span>620<span>-</span>3803
Même problème dans l'application Sencha Touch résolu avec la balise méta (<meta name="format-detection" content="telephone=no">
) dans index.html de l'application.
Vous pouvez essayer de les encoder en tant qu'entités HTML:
0 = 0
9 = 9
J'ai aussi ce problème: Safari et d'autres navigateurs mobiles transforment les identifiants de TVA en numéros de téléphone. Donc, je veux une méthode propre pour l'éviter sur un seul élément, pas sur la page entière (ou le site).
Je partage une solution possible que j'ai trouvée, elle est sous-optimale mais néanmoins assez viable: je mets, à l'intérieur du numéro, je ne veux pas devenir un lien tel:
, le ⁠
_ Entité HTML qui est le caractère invisible Word-Joiner . J'ai essayé de rester plus sémantique (enfin, au moins une sorte de) en plaçant ce caractère dans un endroit où il a un sens, par exemple. pour le numéro de TVA, j'ai choisi de le placer entre les différents groupes de chiffres en fonction de son format donc pour une TVA italienne, j’écrivis: 0613605⁠048⁠8
qui s'affiche en 06136050488 et c’est pas transformé en un numéro de téléphone.
Cela m'a un peu dérouté pendant un moment, mais j'ai finalement compris. Nous avons mis à jour notre site et converti certains numéros en liens, d'autres non. Il s'avère que les nombres ne seront pas convertis en lien s'ils se trouvent dans un <fieldset>. Évidemment, ce n'est pas la bonne solution dans la plupart des circonstances, mais dans certains cas, ce sera la bonne.
Une autre option consiste à remplacer les traits d'union dans votre numéro de téléphone par le caractère ‑
(U + 2011 'Trait d'union Unicode')
Décomposer le nombre en blocs de texte séparés
301 <div style="display:inline-block">441</div> 3909
Cette réponse l'emporte sur tout à partir du 6-13-2012:
<a href="#" style="color: #666666;
text-decoration: none;
pointer-events: none;">
Boca Raton, FL 33487
</a>
Modifiez la couleur en fonction de votre texte, la décoration du texte supprime le soulignement, les événements de pointeur l'empêchent d'être affiché comme un lien dans un navigateur (le pointeur ne se change pas en main).
Ceci est parfait pour les emails HTML sur iOS et le navigateur.
Pourquoi voudriez-vous supprimer le lien, cela le rend très convivial d'avoir l'option eoption.
Si vous souhaitez simplement supprimer la modification automatique, mais que le lien fonctionne, ajoutez-le simplement à votre CSS ...
a[href^=tel] {
color: inherit;
text-decoration:inherit;
}