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

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.

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.

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

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;

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

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

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 .

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>

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.

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>

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

0 = 0
9 = 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.

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

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.

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

<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

Vous pouvez essayer de les encoder en tant qu'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 index.html de l'application.

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

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

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

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.

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.

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

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