web-dev-qa-db-fra.com

Comment désactiver la liaison de numéros de téléphone dans Mobile Safari?

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?

iphonesafarimobile-safari
344
benzado

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.

679
lewinski

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.

36
Florian Grell

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;
33
catshow

Ajoutez ceci, je pense que c'est ce que vous cherchez:

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

J'utilise un menuisier de largeur nulle &zwj;

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

28
stickyuser

Solution pour Webview!

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 .

10
user788055

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>
7
yodaisgreen

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.

6
BobFromBris

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>

6
diazwatson

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

4
mhenry1384

J'ai eu le même problème, mais sur une application web iPad.

Malheureusement, ni ...

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

ni ...

&#48; = 0
&#57; = 9

... travaillé.

Mais, voici trois hacks laids:

  • en remplaçant le nombre "0" par la lettre "O"
  • en remplaçant le chiffre "1" par la lettre "l"
  • insérer une étendue sans signification: par exemple, 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.

4
mattstuehler

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.

4
Alan M.

<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

2
cabrera

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
2
Jay

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-8&#48;&#48;<span>-</span>62&#48;<span>-</span>38&#48;3
1
Phil LaNasa

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.

1
someone else

Vous pouvez essayer de les encoder en tant qu'entités HTML:

&#48; = 0
&#57; = 9
1
Diodeus - James MacFarlane

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 &#8288; _ 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&#8288;048&#8288;8 qui s'affiche en 0613605⁠0488 et c’est pas transformé en un numéro de téléphone.

1
kaosmos

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.

1
Oliver P

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

1
Daniel

Décomposer le nombre en blocs de texte séparés

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

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.

0
Vincent Tobiaz

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