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?

319
demandé sur benzado 2008-10-22 19:00:44

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.

635
répondu lewinski 2018-04-06 00:17:48

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;
33
répondu catshow 2011-12-14 20:08:31

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.

33
répondu Florian Grell 2013-03-12 10:29:25

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

<meta name = "format-detection" content = "telephone=no">
28
répondu Chuck 2008-10-22 15:18:03

j'utilise un menuisier de largeur zéro &zwj;

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

21
répondu stickyuser 2016-04-20 03:15:16

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 .

11
répondu TRiG 2014-02-05 18:02:40

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.

7
répondu BobFromBris 2010-08-10 20:16:14

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>
7
répondu yodaisgreen 2011-12-13 23:47:02

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

&#48; = 0
&#57; = 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.

5
répondu mattstuehler 2011-04-26 22:17:14

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

5
répondu mhenry1384 2011-05-18 15:54:48

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.

5
répondu Alan M. 2011-09-05 08:14:56

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>

5
répondu diazwatson 2015-06-25 15:04:16

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
3
répondu Jay 2013-02-14 07:56:46

<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

3
répondu cabrera 2014-03-30 17:56:28

vous pouvez essayer de les encoder comme des entités HTML:

&#48; = 0
&#57; = 9
2
répondu Diodeus - James MacFarlane 2008-10-22 15:14:28

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.

2
répondu someone else 2012-01-25 19:37:21

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.

2
répondu Vincent Tobiaz 2012-06-13 19:20:23

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-8&#48;&#48;<span>-</span>62&#48;<span>-</span>38&#48;3
2
répondu Phil LaNasa 2013-07-29 15:27:40

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;
}
2
répondu Marc 2014-03-24 09:45:38

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 &#8288; 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&#8288;048&#8288;8 qui rend en 06136050488 et il n'est pas transformé en numéro de téléphone.

1
répondu kaosmos 2017-05-23 12:02:56

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

1
répondu Daniel 2016-04-29 01:14:01

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

. Évidemment pas la bonne solution pour la plupart des cas, mais dans certains, ce sera la bonne.

1
répondu Oliver P 2016-06-09 09:42:47

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

301 <div style="display:inline-block">441</div> 3909
0
répondu Kareem 2016-07-05 22:20:43

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

-9
répondu Chris Copland 2014-09-13 09:05:33