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

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:

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>

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

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

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

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

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?

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.

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

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.

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

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

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.

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 .

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