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

363

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 la transforme en lien de 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?

benzado
la source

Réponses:

714

Cela semble être la bonne chose à faire, selon la référence HTML Safari :

<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 la page pertinente de la bibliothèque des développeurs d'Apple.

lewinski
la source
1
Cela ne fonctionne tout simplement pas. Pas pour les applications Web sur iOS 4.3.1 de toute façon.
mhenry1384
5
4.2.1 sur iPhone fonctionne; developer.apple.com/library/ios/#featuredarticles/…
Mark Brackett
2
Je voulais juste noter que cela fonctionne également pour les versions récentes, telles que 5.1.1 sur lesquelles je suis maintenant.
Dave Stein
4
Cela peut-il être appliqué au cas par cas? Par exemple, 1 chaîne de numéro sur une page que je ne veux pas être interprétée comme un numéro de téléphone, mais conserver le comportement de 6 autres personnes sur une page que je souhaite être automatiquement interprétée comme un numéro de téléphone?
jpostdesign
3
Cela fonctionne parfaitement bien sous IOS 12 en 2019! 👍🏻
Matt Komarnicki
38

Pour désactiver l'apparence d'analyse 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.

Florian Grell
la source
5
Excellente solution où vous souhaitez restreindre le style / la mise en forme à un emplacement très spécifique.
mikevoermans
36

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

stickyuser
la source
1
Cela fonctionne pour moi. Je l'ajoute juste avant le premier numéro.
vinboxx
1
La meilleure solution!
El cero
J'ai créé une signature électronique HTML et c'était la seule solution qui a aidé à empêcher le courrier iOS 10 de détecter à tort un numéro (non téléphonique) en tant que numéro de téléphone.
Nick
1
Solution soignée. A bien fonctionné sur iPhone 6S (+) / iOS 9.
Ain Tohvri
1
C'est la seule solution réalisable si vous demandez à Mobile Safari de charger un fichier XML qui utilise une directive <? Xml-stylesheet> pour générer la page HTML. Mobile Safari convertit tout nombre long dans le XML d'origine en un lien "tel:", même si la source n'est pas HTML (!).
Mark Reinhold
33

J'avais le même problème. J'ai trouvé une propriété sur UIWebView qui vous permet de désactiver les détecteurs de données.

self.webView.dataDetectorTypes = UIDataDetectorTypeNone;
exposition de chats
la source
Enfin, une solution qui a fonctionné pour moi. Bien sûr, cela ne fonctionnera qu'avec des personnes écrivant leur propre application objective-c en utilisant UIWebView, et non en utilisant l'application Safari. Merci!!
iandotkelly
29

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

<meta name = "format-detection" content = "telephone=no">
Mandrin
la source
10

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 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 de téléphone dans PhoneGap-iOS .

Trigonométrie
la source
Je suis allé implémenter le code de awoodland avant de lire le commentaire de badger110. Donc je suis là, dans AppDelegate.m quand il me vient à l'esprit que j'ai vu cela quelque part. Je commence à regarder autour de moi, trouve la case à cocher dans le fichier xib et je pense que je viens de découvrir quelque chose de magique. Je reviens pour poster cette glorieuse découverte et je trouve que le commentaire de badger110 était toujours là. TL DR: Lisez d'abord les commentaires, ya tête d'articulation.
Tina D.
8

Pour désactiver la détection des numéros de téléphone sur une partie d'une page, enveloppez le texte affecté dans une balise d'ancrage avec href = "#". Si vous faites cela, Safari mobile et UIWebView devraient le laisser tranquille.

<a href="#"> 1234567 </a>
yodaisgreen
la source
1
C'est ce que j'ai fini par faire car le metatag ne fonctionnait pas. Cependant, il vaut probablement mieux <a href="javascript:;">éviter les effets secondaires d'un changement d'URL.
JustJohn
Cela fonctionne pour moi dans les e-mails HTML. Je voulais seulement désactiver un numéro de téléphone, pas tous. Je viens d'ajouter le style = "text-decoration: none;" à la balise avec la couleur correspondant au reste du texte, et vous pouvez également changer le style du curseur.
Simon Darby
6

Je pense avoir trouvé une solution: mettre le nombre à l'intérieur d'un <label>élément. Je n'ai pas essayé d'autres balises, mais<div> je l'ai laissé actif sur l'écran d'accueil, même avec letelephone=no attribut.

Il semble évident à partir des commentaires précédents que la balise META a fonctionné, mais pour une raison quelconque, elle s'est rompue sous les versions ultérieures d'iOS, au moins sous certaines conditions. J'utilise 4.0.1.

BobFromBris
la source
Salut Bob. Si vous voulez mettre dans les exemples de code HTML, vous devez envelopper le code dans les apostrophes inverses, <like this>. (Stack Overflow utilise un langage de formatage appelé Markdown.) Je modifierai votre réponse en conséquence.
Paul D. Waite
Cela n'a finalement pas fonctionné - lorsque j'ai rechargé l'application, le lien hilitant était de retour. J'ai eu recours à l'ajout d'un #caractère à l'avant du numéro de téléphone: selon le document Apple "Apple URL Scheme Reference": "Plus précisément, si une URL contient les caractères * ou #, l'application Téléphone n'essaie pas de composer le correspondant numéro de téléphone."
BobFromBris
Vous devez supprimer votre réponse, car cela ne fonctionne pas. Comme vous le reconnaissez vous-même dans le commentaire ci-dessus.
mhenry1384
@Bob Belle astuce propre. Nous avons eu des problèmes avec HTML dans un e-mail. Envelopper dans une étiquette a bien fonctionné +1, merci
geedubb
6

Vous pouvez également utiliser l' <a>étiquette avec javascript: void(0)comme hrefvaleur.

Exemple comme suit:
<a href="javascript: void(0)">+44 456 77 89 87</a>

diazwatson
la source
Cela m'a aidé en cas de besoin à utiliser le style et les actions iOS par défaut, mais à ignorer des éléments spécifiques.
GreaterKing
4

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

Malheureusement non plus ...

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

ni ...

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

... travaillé.

Mais, voici trois vilains hacks:

  • en remplaçant le chiffre "0" par la lettre "O"
  • en remplaçant le chiffre "1" par la lettre "l"
  • insérer une durée vide de sens: 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 une pincée.

mattstuehler
la source
2
«Selon la police que vous utilisez, les deux premiers sont à peine perceptibles» À moins que l'utilisateur n'ait configuré iOS pour leur lire le contenu . Ce serait alors assez visible.
Paul D. Waite
1
Pour l'accessibilité (comme le lecteur de texte mentionné ci-dessus), ou si l'utilisateur copie / colle dans l'application du téléphone, cela casse juste les choses. De plus, en général, si une araignée de Yelp ou de Google ou similaire indexe une entreprise et tire le mauvais numéro de téléphone, ce n'est pas bon.
Jonah
4

J'avais un ABN (Australian Business Number) que l'iPad Safari a insisté pour transformer en lien de numéro de téléphone. Aucune des suggestions n'a aidé. Ma solution a été de mettre des balises img entre les chiffres.

ABN 98<img class="PreventSafariFromTurningIntoLink" /> 009<img /> 675<img /> 709

La classe existe uniquement pour documenter à quoi servent les balises img.

Fonctionne sur iPad 1 (4.3.1) et iPad 2 (4.3.3).

mhenry1384
la source
3
Malheureusement, dans Internet Explorer, j'obtiens ces icônes d'image cassées. L'ajout d' width="0" height="0"aides, mais toujours un seul pixel est affiché.
Geert
1
Vous n'avez pas besoin d'images, insérez simplement du code HTML dans le numéro: <p> Pas un téléphone: 112 <span> 34 </span> 56 </p>
Radek Pech
@Geert, mettez line-heightet font-sizeà zéro.
HelpNeeder
4

Mon expérience est la même que certaines autres mentionnées. La balise META ...

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

... fonctionne lorsque le site Web fonctionne 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 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">

C'est loin d'être idéal car, bien que la bordure ne soit pas définie, iOS affiche une barre grise de plusieurs pixels au-dessus du champ. Mais c'est mieux que de voir le numéro comme un lien.

Alan M.
la source
3

J'ai testé cela moi-même et j'ai 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 la transformer en lien.

(604) 555<span></span> -4321
Geai
la source
1
C'est aussi le correctif que j'ai fini par utiliser et cela fonctionne très bien et est assez simple.
Holger
2
Ce n'est pas une bonne réponse, car vous générez un mauvais HTML volontaire.
stephanfriedrich
2

<meta name = "format-detection" content = "telephone=no"> ne fonctionne pas pour les e-mails: si le code HTML que vous préparez est pour un e-mail, la balise META sera ignorée.

Si vous ciblez des e-mails, voici une autre solution laide mais qui fonctionne pour vous:

Exemple de code HTML que 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 de 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 devrez peut-être une requête multimédia pour chacun des combos ipad / iphone portrait / landscape

cabrera
la source
1

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

&#48; = 0
&#57; = 9
Diodée - James MacFarlane
la source
1

Même problème dans l'application Sencha Touch résolu avec la balise meta ( <meta name="format-detection" content="telephone=no">) dans index.html de l'application.

quelqu'un d'autre
la source
1

Une astuce que j'utilise qui fonctionne sur plus que Mobile Safari est d'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'est-à-dire

Phone: 1-8&#48;&#48;<span>-</span>62&#48;<span>-</span>38&#48;3
Phil LaNasa
la source
1

J'ai moi aussi ce problème: Safari et d'autres navigateurs mobiles transforment les identifiants TVA en numéros de téléphone. Je veux donc une méthode propre pour l'éviter sur un seul élément, pas sur toute la page (ou site).
Je partage une solution possible que j'ai trouvée, elle n'est pas optimale mais elle est quand même assez viable: je mets, à l'intérieur du nombre je ne veux pas devenir un tel:lien, l' &#8288;entité HTML qui est le caractère invisible de Word-Joiner . J'ai essayé de rester plus sémantique (enfin, au moins une sorte de) en mettant ce caractère dans un certain sens, par exemple pour l'ID de TVA, j'ai choisi de le mettre entre les différents groupes de chiffres en fonction de son format, donc pour une TVA italienne, je a écrit: 0613605&#8288;048&#8288;8qui rend en 0613605⁠048⁠8 et il n'est pas transformé en numéro de téléphone.

kaosmos
la source
1

Une autre option consiste à remplacer les tirets de votre numéro de téléphone par le caractère (U + 2011 'Trait d'unicode insécable')

Daniel
la source
1

J'ai été vraiment confus par cela pendant un certain temps, mais j'ai finalement compris. Nous avons apporté des mises à jour à notre site et avons converti certains chiffres en liens, d'autres non. Il s'avère que les nombres ne seront pas convertis en lien s'ils sont dans un <fieldset>. Ce n'est évidemment pas la bonne solution pour la plupart des circonstances, mais dans certains cas, ce sera la bonne.

Oliver P
la source
0

Cette réponse l'emporte sur tout au 13/06/2012:

<a href="#" style="color: #666666; 
                   text-decoration: none;
                   pointer-events: none;">
  Boca Raton, FL 33487
</a>

Changez la couleur en ce qui correspond à votre texte, la décoration de texte supprime le soulignement, les événements de pointeur l'empêchent d'être affiché comme un lien dans un navigateur (le pointeur ne change pas en main)

C'est parfait pour les e-mails HTML sur iOS et le navigateur.

Vincent Tobiaz
la source
1
Il me semble que cela définit explicitement la couleur. En d'autres termes, il sera gris quoi qu'il arrive.
benzado
«Les événements de pointeur l'empêchent d'être affiché comme un lien dans un navigateur» - dans un navigateur qui prend en charge pointer-events, bien sûr. Si l'utilisateur consulte vos e-mails HTML dans IE 10, cela ne sert à rien .
Paul D. Waite
La question concerne la suppression de la détection des numéros de téléphone et non des adresses postales.
jww
0

Pourquoi voudriez-vous supprimer le lien, il est très convivial d'avoir l'option.

Si vous souhaitez simplement supprimer l'édition automatique, mais que le lien fonctionne, ajoutez-le simplement dans votre CSS ...

a[href^=tel] {
 color: inherit;
 text-decoration:inherit;
}
Marc
la source
5
eh bien, je ne peux pas dire à propos de l'affiche originale, mais dans mon cas, Safari suppose que les téléphones ne sont pas réellement des numéros de téléphone, ce sont des données financières
Irae Carvalho
1
La question concerne la détection des liens sur les numéros de téléphone, et non leur modification.
jww
Dans certains cas, vous pouvez avoir un numéro de téléphone sur un site Web où vous devez effectuer une autre opération que de passer un appel téléphonique, comme tirer une option pour le modifier, ou la possibilité de cliquer et de le faire glisser ailleurs.
Nosajimiki
il ne veut pas que les adresses IP soient liées en tant que numéros de téléphone
jahller
0

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

301 <div style="display:inline-block">441</div> 3909
Kareem
la source
1
Vous voudrez peut-être mentionner qu'il s'agit d'une solution de contournement.
Daan
-16

Une autre solution serait d'utiliser une image du numéro IP

Chris Copland
la source
4
Je pense que ce n'est pas une telle idée de Dieu. Veuillez supprimer votre réponse. Parce que vous ne pouvez pas copier / coller un texte d'images, ce n'est pas facile à entretenir (si vous changez le contenu ou le style de police) et ce n'est pas sans obstacle.
stephanfriedrich
la solution pourrait être pire que le problema, comme l'a dit @stephanfriedrich, cela ne sera pas utile ou utilisable
kaosmos
Pas du tout utile.
Luca Antonelli