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

https://stackoverflow.com/questions/226131

03-07-2019
|

Question

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 d'une page?

La solution

Cela semble être la bonne chose à faire, selon le Référence HTML pour 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 " tel " Schéma d'URI.

Voici le page pertinente dans la bibliothèque de développeurs Apple.

Autres conseils

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

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 à votre délégué d'application de projet & # 8217;

// ...

- (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 concerné 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>. N'a essayé aucune autre balise, mais <div> l'a laissée active sur l'écran d'accueil, même avec l'attribut telephone=no.

Il semble évident d'après les commentaires précédents que la balise méta a bien fonctionné, mais que, pour une raison quelconque, elle est tombée en panne sous les versions ultérieures d'iOS, du moins dans certaines conditions. J'utilise la version 4.0.1.

Vous pouvez également utiliser le libellé <a> avec javascript: void(0) comme href valeur.

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

Malheureusement, ni ...

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

ni ...

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

... a travaillé.

Mais voici trois trucs laids:

en remplaçant le nombre " 0 " avec la lettre " O "
en remplaçant le numéro " 1 " avec la lettre " l "
insérez une étendue sans signification: par exemple, 555.5<span>5</span>5.5555

En fonction de la police que vous utilisez, les deux premières 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 à la limite.

J'avais un ABN (numéro d'entreprise australien) 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 placer des balises img entre les nombres.

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

La classe existe uniquement pour documenter les balises img.

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

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 la moins 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, bien que la bordure soit définie 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.

J'ai testé cela moi-même et constaté que cela fonctionnait bien que ce ne soit certainement pas une solution élégante. Insérer 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

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

Si vous ciblez des courriels, voici une autre solution laide 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

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

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

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

Une astuce que j'utilise et qui ne fonctionne pas uniquement avec Safari mobile consiste à utiliser des codes d'échappement HTML et une petite marge dans le numéro de téléphone. Cela rend plus difficile pour le navigateur & Quot; identifier & Quot; 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 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 souhaite pas devenir un lien tel:, 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 plaçant ce caractère dans un endroit où il a un sens, par exemple. pour l'ID de TVA, j'ai choisi de le placer entre les différents groupes de chiffres en fonction de son format pour pour une TVA italienne, j’écrivis: 0613605⁠048⁠8 ce qui rend en 0613605 & # 8288; 048 & # 8288; 8 et il n’est pas transformé en numéro de téléphone.

Une autre option consiste à remplacer les traits d'union de votre numéro de téléphone par le caractère ‑ (trait d'union sans rupture Unicode ')

J'ai été vraiment dérouté par cela 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 & Lt; fieldset & Gt ;. Évidemment, ce n'est pas la bonne solution dans la plupart des cas, mais dans certains cas, ce sera la bonne.

Cette réponse dépasse 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 navigateur.

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

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

a[href^=tel] {
 color: inherit;
 text-decoration:inherit;
}

Découpez le nombre en blocs de texte distincts

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

Une autre solution consisterait à utiliser une image du numéro IP

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow