Comment annoter des numéros de téléphone?


471

Je souhaite marquer un numéro de téléphone comme lien appelable dans un document HTML. J'ai lu l'approche des microformats , et je sais, que le tel:schéma serait standard, mais n'est littéralement mis en œuvre nulle part.

Skype définit, pour autant que je sache, skype:et callto:ce dernier ayant acquis une certaine popularité. Je suppose que d'autres sociétés ont soit d'autres régimes, soit sautent sur lecallto: train.

Quelle serait la meilleure pratique pour baliser un numéro de téléphone, afin que le plus de personnes possible avec un logiciel VoIP puissent simplement cliquer sur un lien pour recevoir un appel?

Question bonus: quelqu'un connaît-il des complications avec des numéros d'urgence tels que le 911 aux États-Unis ou le 110 en Allemagne?

À votre santé,

Mise à jour: Microsoft NetMeeting prend des callto:schémas sous WinXP. Cette question suggère que Microsoft Office Communicator gérera les tel:schémas mais pas callto:ceux. Génial, Redmond!

Mise à jour 2: deux ans et demi plus tard maintenant. Cela semble se résumer à ce que vous voulez faire avec le nombre. Dans le contexte mobile, tel:c'est la voie à suivre. Cibler les postes de travail dépend de vous, si vous pensez que vos utilisateurs sont davantage des utilisateurs de Skype ( callto:) ou ont plus de chances d' tel:installer quelque chose comme Google Voice ( ). Mon opinion personnelle est, en cas de doute, utiliser tel:(conformément à la réponse de @Sidnicious).

Mise à jour 3: L' utilisateur @ rybo111 a noté que Skype dans Chrome avait entre-temps sauté dans le tel:train. Je ne peux pas vérifier cela, car aucune machine avec les deux à portée de main, mais si c'est vrai, cela signifie que nous avons enfin un gagnant ici:tel:


1
Malheureusement non. Cela semble se résumer à ce que fait votre fournisseur (VoiP, téléphone portable ou autre). Cela peut aussi bien facturer 800 numéros.
Boldewyn

1
J'utilise Google Voice dans Chrome et il ne reconnaît pas les tel:URI. Je suis toujours fidèle callto:et avec un affichage du numéro de téléphone sur la théorie selon laquelle les navigateurs de téléphones mobiles devraient de toute façon détecter automatiquement le numéro.
Old Pro

5
Malgré le titre, cette question est vraiment "quel schéma d'URL devez-vous utiliser pour les numéros de téléphone", plutôt que comment les baliser.
Raedwald

1
@Boldewyn Skype est invité lors de l'utilisation de Chrome avec tel:donc peut-être que vous devriez supprimer votre commentaire à la fin sur l'utilisation de Skype callto:?
rybo111

1
Pourriez-vous s'il vous plaît essayer de modifier vos mises à jour de questions dans les réponses correspondantes. Comme ça, c'est un peu le bordel.
idmean

Réponses:


495

Le tel:schéma a été utilisé à la fin des années 1990 et documenté au début de 2000 avec la RFC 2806 (qui était obsolète par la RFC 3966 plus approfondie en 2004) et continue d'être amélioré . La prise en charge tel:sur l'iPhone n'était pas une décision arbitraire.

callto:, bien que pris en charge par Skype, n'est pas une norme et doit être évité, sauf s'il cible spécifiquement les utilisateurs de Skype.

Moi? Je commencerais juste à inclure des tel:URI correctement formés sur vos pages (sans renifler l'agent utilisateur) et j'attendrais que le reste des téléphones du monde rattrape le retard :).

Exemple :

<a href="tel:+18475555555">1-847-555-5555</a>


Merci pour la réponse détaillée! Depuis que j'ai posé la question, j'ai été tenté de suivre cette approche également. Utilisez la norme et dites aux personnes qui se plaignent qu'elles utilisent la mauvaise application / le mauvais outil. Bien que cela devienne difficile, si celui-ci est votre client, je pense que vous avez raison. Si néanmoins je dois considérer les utilisateurs de Skype, je vais aller avec ma solution JavaScript dans l'autre sens.
Boldewyn

1
Nous sommes en 2014 et Tel: fonctionne désormais pour Skype. Mais si vous souhaitez initier un appel au service de test de son / écho Skype, le lien serait <a href="skype:echo123?call"> Appelez le service de test de son / écho Skype </a> à partir de msdn.microsoft. com / fr-fr / library / office /…
OzBob

4
Quelqu'un a essayé le href="tel://1-555-555-5555"format? les gars de Tutsplus le recommandent code.tutsplus.com/tutorials/…
Adrien Be

2
D'après mon expérience avec le tel: tag Skype nécessite que le code du pays avec un + soit sur le numéro (par exemple "+44" pour les numéros britanniques) pour analyser correctement le numéro. Sinon, il ouvre simplement Skype mais n'essaie pas de composer.
ShaunUK

3
L'exemple ne devrait-il pas être: <a href="tel:+18475555555">? Notez le + avant le premier 1.)
Stéphane

73

Mes résultats de test:

appeler pour:

  • Navigateur Nokia: rien ne se passe
  • Google Chrome: demande d'exécuter skype pour appeler le numéro
  • Firefox: demande de choisir un programme pour appeler le numéro
  • IE: demande d'exécuter skype pour appeler le numéro

tel:

  • Navigateur Nokia: travail
  • Google Chrome: rien ne se passe
  • Firefox: "Firefox ne sait pas comment ouvrir cette URL"
  • IE: impossible de trouver l'URL

2
Pour ajouter à cela, le comportement est le même pour Google Chrome sur Android 4.2.2 (Nexus 4). Avoir la version Android de Skype en arrière-plan ne fait même pas fonctionner callto: links. En bref, vous ne pouvez pas vraiment utiliser les liens callto: si vous souhaitez cibler le mobile à la minute.
aendrew

Maintenant sur Chrome 35, vous obtenez cette fenêtre contextuelle
pec

Dans Chrome et Firefox (peut-être IE également), vous pouvez enregistrer un de vos services Web pour le tel:préfixe avec registerProtocolHandler .
Ross Rogers

Vous devez utiliser le numéro de téléphone + countrycode qui fonctionne sur Chrome. tel: les liens ne semblent pas fonctionner avec skype sur chrome sans +
Stas Svishov

Mise à jour sur OSX et Chrome: il demande de lancer Facetime.
Jules

45

Le mieux est de commencer avec tel: qui fonctionne sur tous les mobiles

Ensuite, insérez ce code, qui ne s'exécutera que sur un bureau et uniquement lorsque vous cliquerez sur un lien.

J'utilise http://detectmobilebrowsers.com/ pour détecter les navigateurs mobiles, vous pouvez utiliser la méthode que vous préférez

if (!jQuery.browser.mobile) {
    jQuery('body').on('click', 'a[href^="tel:"]', function() {
            jQuery(this).attr('href', 
                jQuery(this).attr('href').replace(/^tel:/, 'callto:'));
    });
}

Donc, fondamentalement, vous couvrez toutes vos bases.

tel: fonctionne sur tous les téléphones pour ouvrir le composeur avec le numéro

callto: fonctionne sur votre ordinateur pour se connecter à skype depuis Firefox, Chrome


Oui, cela - callto: ne fonctionne pas du tout sur Android (voir mon commentaire sur la réponse de Murat), et tel: ne fonctionne pas vraiment sur le bureau. C'est vraiment dommage.
aendrew

1
Hmmm, malheureusement, un rapide jsfiddle ne semble pas laisser cela fonctionner non plus ... jsfiddle.net/tchalvakspam/gVZYt/3
Kzqai

En travaillant sur Seamonkey 2.20 sur Mac 10.8, mettez en dessous le <body <?php body_class(); ?>>code du fichier header.php d'un thème wordpress.
om01

callto: n'a pas fonctionné pour chrome dans mac et la version est à jour
Ujjwal

Malheureusement, cela a été déprécié dans JQuery 1.9 jquery.com/upgrade-guide/1.9/#jquery-browser-removed
Casebash

21

Comme on pouvait s'y attendre, la prise en charge de WebKit tel:s'étend également au navigateur mobile Android - FYI


15
Cela aurait été mieux en tant que commentaire, mais bien de savoir quand même.
o0 '.

10

Je garde cette réponse à des fins "historiques" mais je ne la recommande plus. Voir la réponse de @Sidnicious ci-dessus et ma mise à jour 2.

Puisqu'il ressemble à un match nul entre callto et tel, je veux apporter une solution possible dans l'espoir que vos commentaires me ramèneront sur le chemin de la lumière ;-)

Utilisation callto:, car la plupart des clients de bureau le géreront:

<a href="callto:0123456789">call me</a>

Ensuite, si le client est un iPhone, remplacez les liens:

window.onload = function () {
  if (navigator.userAgent.match (/iPhone/i)) {
    var a = document.getElementsByTagName ("a");
    for (var i = 0; i < a.length; i++) {
      if (a[i].getAttribute ('href').search (/callto:/i) === 0) {
        a[i].setAttribute ('href', a[i].getAttribute ('href').replace (/^callto:/, "tel:"));
      }
    }
  }
};

Des objections contre cette solution? Dois-je commencer de préférence tel:?


Il se pourrait que l'iPhone prenne également en charge le schéma callto, mais qu'Apple préfère le tel, c'est donc celui mentionné dans la documentation.
Jan Aagaard

5
Voir ma réponse. callto:est un schéma d'URI propriétaire, donc je ne commencerais pas par là.
s4y

callto: didnot travaillé pour chrome dans mac et la version est à jour.
Ujjwal

Cela ne me surprend pas. Le paysage était fondamentalement différent en 2009, lorsque la réponse a été donnée. En outre, vous avez besoin d'un programme tiers, qui s'inscrit pour le callto:schéma, comme Skype. Chrome lui-même n'a aucune idée de ce qu'il doit faire.
Boldewyn

9

Mobile Safari (iPhone et iPod Touch) utilise le tel:schéma.

Comment composer un numéro de téléphone à partir d'une page Web sur iPhone?


2
Donc, si les principaux utilisateurs ciblés sont l'iPhone ou l'iPod Tough (et peut-être d'autres appareils mobiles, je ne sais pas ...), vous devez utiliser tel: Si les principaux utilisateurs sont des clients Web normaux (IE, Firefox, etc.) en utilisant skype ou un autre logiciel VoIP, je pense que callto: serait le meilleur.
admiration le

3

La RFC3966 définit l'URI standard de l'IETF pour les numéros de téléphone, c'est-à-dire l'URI «tel:». Voilà la norme. Il n'y a pas de norme similaire qui spécifie `` callto: '', c'est une convention particulière pour Skype sur les plateformes où permet d'enregistrer un gestionnaire d'URI pour le prendre en charge.


C'est ce que Sidnicious a dit, oui.
Boldewyn

3

cela a fonctionné pour moi:

1. créer un lien conforme aux normes:

        <a href="tel:1500100900">

2. remplacez-le lorsque le navigateur mobile n'est pas détecté, pour skype:

$("a.phone")
    .each(function()
{ 
  this.href = this.href.replace(/^tel/, 
     "callto");
});

La sélection du lien à remplacer via la classe semble plus efficace. Bien sûr, cela ne fonctionne que sur les ancres avec .phoneclasse.

Je l'ai mis en fonction if( !isMobile() ) { ...pour qu'il ne se déclenche que lorsqu'il détecte un navigateur de bureau. Mais celui-ci est probablement obsolète ...

function isMobile() {
    return (
        ( navigator.userAgent.indexOf( "iPhone" ) > -1 ) ||
        ( navigator.userAgent.indexOf( "iPod" ) > -1 ) ||
        ( navigator.userAgent.indexOf( "iPad" ) > -1 ) ||
        ( navigator.userAgent.indexOf( "Android" ) > -1 ) ||
        ( navigator.userAgent.indexOf( "webOS" ) > -1 )
    );
}

La manière "appropriée" de détecter les navigateurs mobiles consiste à vérifier la chaîne insensible à la casse "mobile".
Kevin Cox

2

J'ai utilisé tel:pour mon projet.

Cela a fonctionné dans Chrome, Firefox, IE9 et 8, Chrome mobile et le navigateur mobile sur mon smartphone Sony Ericsson.

Mais callto:n'a pas fonctionné dans les navigateurs mobiles.


2

J'utiliserais tel:(comme recommandé). Mais pour avoir un meilleur repli / ne pas afficher les pages d'erreur, j'utiliserais quelque chose comme ça (en utilisant jquery):

// enhance tel-links
$("a[href^='tel:']").each(function() {
    var target = "call-" + this.href.replace(/[^a-z0-9]*/gi, "");
    var link = this;

    // load in iframe to supress potential errors when protocol is not available
    $("body").append("<iframe name=\"" + target + "\" style=\"display: none\"></iframe>");
    link.target = target;

    // replace tel with callto on desktop browsers for skype fallback
    if (!navigator.userAgent.match(/(mobile)/gi)) {
        link.href = link.href.replace(/^tel:/, "callto:");
    }
});

L'hypothèse est que les navigateurs mobiles qui ont un tampon mobile dans la chaîne userAgent prennent en charge le tel:protocole. Pour le reste nous remplaçons le lien par lecallto: protocole pour avoir un repli sur Skype là où il est disponible.

Pour supprimer les pages d'erreur pour les protocoles non pris en charge, le lien est ciblé vers une nouvelle iframe masquée.

Malheureusement, il ne semble pas possible de vérifier si l'url a été chargée avec succès dans l'iframe. Il semble qu'aucun événement d'erreur ne soit déclenché.


Belle utilisation des iframes cachés!
Boldewyn

1

Étant donné que callto:par défaut est pris en charge par skype (configuré dans les paramètres Skype), et que d'autres le prennent également en charge, je recommanderais d'utiliser callto:plutôt que skype:.


3
Ici, je suis d'accord. Mais tous ensemble, cela semble se résumer à tel: vs callto:, et ce n'est pas facile.
Boldewyn

1

Bien qu'Apple recommande tel:dans leurs documents pour Mobile Safari, actuellement (iOS 4.3), il accepte callto:tout de même. Je recommande donc d'utiliser callto:sur un site Web générique car il fonctionne à la fois avec Skype et iPhone et je m'attends à ce que cela fonctionne également sur les téléphones Android.

Mise à jour (juin 2013)

Il s'agit toujours de décider ce que vous voulez que votre page Web offre. Sur mes sites Web, je fournis à la fois tel:et des callto:liens (ce dernier étant étiqueté comme étant pour Skype) car les navigateurs de bureau sur Mac ne font rien avec les tel:liens tandis que Android mobile ne fait rien avec les callto:liens. Même Google Chrome avec le plugin Google Talk ne répond pas aux tel:liens. Néanmoins, je préfère offrir les deux liens sur le bureau au cas où quelqu'un se donnerait la peine de faire fonctionner les tel:liens sur son ordinateur.

Si la conception du site exigeait que je ne fournisse qu'un seul lien, j'utiliserais un tel:lien vers lequel j'essaierais de changer callto:sur les navigateurs de bureau.


1
le navigateur de stock dans la dernière version open-source d'Android "Ice Cream Sandwich" semble toujours prendre en charge uniquement tel:; en cliquant sur un callto:lien
obtenez

0

En utilisant jQuery, remplacer tous les numéros de téléphone des États - Unis sur la page avec le appropriée callto:ou les tel:régimes.

// create a hidden iframe to receive failed schemes
$('body').append('<iframe name="blackhole" style="display:none"></iframe>');

// decide which scheme to use
var scheme = (navigator.userAgent.match(/mobile/gi) ? 'tel:' : 'callto:');

// replace all on the page
$('article').each(function (i, article) {
    findAndReplaceDOMText(article, {
        find:/\b(\d\d\d-\d\d\d-\d\d\d\d)\b/g,
        replace:function (portion) {
            var a = document.createElement('a');
            a.className = 'telephone';
            a.href = scheme + portion.text.replace(/\D/g, '');
            a.textContent = portion.text;
            a.target = 'blackhole';
            return a;
        }
    });
});

Merci à @jonas_jonas pour l'idée. Nécessite l'excellente fonction findAndReplaceDOMText .


1
Cette solution n'est pas idéale, car l'analyse de la chaîne d'agent utilisateur est considérée comme une mauvaise pratique. Prenons un appareil qui prend en charge l' telURI mais ne se présente pas comme un mobile.
Arturo Torres Sánchez

-1

J'utilise le <a href="tel:+123456">12 34 56</a>balisage normal et rend ces liens non cliquables pour les utilisateurs de bureau viapointer-events: none;

a[href^="tel:"] {
    text-decoration: none;
}
.no-touch a[href^="tel:"] {
    pointer-events: none;
    cursor: text;
}

pour les navigateurs qui ne prennent pas en charge les événements de pointeur (IE <11), le clic peut être empêché avec JavaScript (l'exemple repose sur Modernizr et jQuery):

if(!Modernizr.touch) {
    $(document).on('click', '[href^="tel:"]', function(e) {
        e.preventDefault();
        return false;
    });
}

1
L'utilisation de Modernizr.touchce qui est la prise en charge de Touch Event pour en déduire la prise en charge tel:n'est pas fiable. Cas d'exception faciles: iPad, tablettes Windows, etc.
zachleat

Même Chrome fonctionnant sur un bureau Windows se présente comme un appareil tactile.
Arturo Torres Sánchez

Certaines machines de classe bureau prennent en charge tel: urls. Pour un exemple spécifique à Mac, FaceTime sur Mac est standard et fonctionne avec tel:, allant jusqu'à utiliser l'iPhone de l'utilisateur avec Handoff / Continuity, donc en utilisant des événements de pointeur: aucun pour cibler les bureaux pourrait ne plus être judicieux de le faire .
OxC0FFEE
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.