web-dev-qa-db-fra.com

Définir le numéro de téléphone automatique dans le navigateur Windows 10 Edge

Le navigateur Edge de Windows 10 semble détecter les numéros de téléphone même si aucune application téléphonique n'est installée sur le système.

Il met en forme le numéro de téléphone en bleu avec un soulignement, même s’il n’ya que du texte brut quelque part (moche sur certains fonds), mais il détecte par exemple, par exemple. Les numéros de TVA comme s'il s'agissait de numéros de téléphone.

Alors, comment pouvons-nous le contrôler en tant que webmasters pour:

  • comment il rend les éléments détectés (je suppose que MSFT a inventé son propre sélecteur CSS pour ces éléments?) 

  • comment désactiver la détection 

De préférence avec quelque chose qui ne fait que cibler ce navigateur et ne risque pas de gâcher les choses pour les autres ou d’ajouter des choses non standard à un code autrement valide.

MODIFIER:

  • La méthode suggérée pour désactiver la détection en fonction de la manière dont elle est effectuée dans IE11 pour Windows Phone ne fonctionne pas dans tous mes tests. La balise META échoue et l'attribut HTML non standard semble fonctionner.

  • J'ai examiné les éléments inspectés dans Edge et il me semble que le CSS calculé pour ces éléments détectés correspond à ce que l'on pourrait s'y attendre s'il n'était pas détecté (le CSS calculé est la couleur normale et aucun soulignement), ce qui suggère peu de chance de contrôler le rendu.

MODIFIER:

scénario de test 1: balise meta (échec)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- test -->
    <meta name="format-detection" content="telephone=no" />
  </head>
  <body>
    <p>text VAT BE 0123.456.789 text </p>
    <p>text +32 11 222 333 text</p>
  </body>
</html>

Cas de test 2: attribut HTML non standard (fonctionne)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <p x-ms-format-detection="none">text VAT BE 0123.456.789 text </p>
    <p>text +32 11 222 333 text</p>
  </body>
</html>

csswindows-10microsoft-edge
28
user3277192

Apparemment, la détection du numéro de téléphone a été introduite dans Internet Explorer 11, mais pas sur les ordinateurs de bureau.

Voici des moyens de le contrôler, extraits de cet article de Microsoft: Reconnaissance du format du numéro de téléphone

  • Pour désactiver le comportement d'un élément (et de ses éléments enfants), définissez l'attribut x-ms-format-detection sur "aucun".
  • Pour désactiver le comportement d'une page Web, utilisez l'élément meta: 

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

  • Pour activer le comportement d'un élément (et de ses éléments enfants), définissez l'attribut x-ms-format-detection sur "phone" ou "all".

  • Pour contrôler de manière sélective le comportement à l'aide de JavaScript, utilisez setAttribute pour modifier la valeur de l'attribut x-ms-format-detection de l'élément associé ou de son parent. (Notez que cela doit être fait avant que l'élément ou le parent ne soit rendu dans le DOM; les modifications dynamiques ne sont pas prises en charge.)

Si je comprends bien l'article, si la détection de téléphone est désactivée au niveau du navigateur, l'attribut x-ms-format-detection (ou la balise méta) sera ignoré.

27
jfrej

Utiliser le x-ms-format-detection="none" a fonctionné pour moi. Cependant, je devais l'ajouter à l'élément parent.

Par exemple, mon numéro de téléphone était placé dans une classe d'envergure; L'ajout direct à la balise span n'a pas résolu le problème sur Edge. 

J'espère que cela pourra aider

5
MikeBurgess

J'ai trouvé un moyen qui me convient parfaitement et qui consiste à changer la balise où vous avez le numéro par un "a" (ancre) au lieu de celui que vous pourriez avoir, sans avoir besoin de href. Ensuite, définissez text-underline sur none et colour to hériter. C'est tout.

1
Jordi

Si vous ajoutez x-ms-format-detection = "none" à la balise body, celle-ci sera appliquée à la page entière.

<body x-ms-format-detection="none">
0
zefram

Cela devrait être un commentaire, mais je n'ai pas encore la réputation, désolé!

En me basant sur la réponse précédente de jfrej et sur le commentaire suivant de Ben Hillier, je voudrais souligner que x-ms-format-detection="none" peut fonctionner sur un élément span, mais pas avec display: inline par défaut, mais style avec votre display: inline-block.

De même, utiliser <div x-ms-format-detection="none" style="display: inline">1234567890</div> ne fonctionnera pas non plus.

0
PMCS