Como marcar números de telefone?

Quero marcar um número de telefone como link que pode ser chamado em um documento HTML. Li a abordagem dos microformatos e sei que o tel:esquema seria padrão, mas não está literalmente implementado em lugar algum.

O Skype define, tanto quanto eu sei, skype:e callto:este último ganhou alguma popularidade. Suponho que outras empresas tenham outros esquemas ou entrem no callto:trem.

Qual seria a melhor prática para marcar um número de telefone, para que o maior número possível de pessoas com o software VoIP possa simplesmente clicar em um link para receber uma ligação?

Pergunta bônus: Alguém sabe sobre complicações com números de emergência como 911 nos EUA ou 110 na Alemanha?

Felicidades,

Atualização: O Microsoft NetMeeting usa callto:esquemas no WinXP. Esta pergunta sugere que o Microsoft Office Communicator tratará de tel:esquemas, mas não de esquemas callto:. Ótimo, Redmond!

Atualização 2: dois anos e meio depois agora. Parece resumir-se ao que você deseja fazer com o número. No contexto móvel, tel:é o caminho a percorrer. A segmentação de desktops depende de você, se você acha que seus usuários são mais pessoas do Skype ( callto:) ou provavelmente terão algo como o Google Voice ( tel:) instalado. Minha opinião pessoal é, quando estiver em dúvida, use tel:(de acordo com a resposta do @Sidnicious ').

Atualização 3: O usuário @ rybo111 observou que, enquanto isso, o Skype no Chrome pulou na tel:onda. Não posso verificar isso, porque nenhuma máquina está com as duas mãos à mão, mas se for verdade, significa que finalmente temos um vencedor aqui:tel:

O tel:esquema foi usado no final dos anos 90 e documentado no início de 2000 com a RFC 2806 (que foi obsoleta pela RFC 3966 mais completa em 2004) e continua a ser aprimorada . Apoiar tel:no iPhone não foi uma decisão arbitrária.

callto:, embora compatível com o Skype, não é um padrão e deve ser evitado, a menos que tenha como alvo específico os usuários do Skype.

Eu? Eu apenas começaria a incluir tel:URIs adequadamente formados em suas páginas (sem cheirar o agente do usuário) e esperaria o restante dos telefones do mundo alcançar :).

Exemplo :

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

Meus resultados de teste:

ligar para:

• Navegador Nokia: nada acontece
• Google Chrome: pede para executar o Skype para ligar para o número
• Firefox: pede para escolher um programa para ligar para o número
• IE: pede para executar o Skype para ligar para o número

tel:

• Navegador Nokia: trabalhando
• Google Chrome: nada acontece
• Firefox: "O Firefox não sabe como abrir esse URL"
• IE: não foi possível encontrar o URL

A melhor aposta é começar com tel: que funciona em todos os celulares

Em seguida, insira esse código, que será executado apenas em uma área de trabalho e somente quando um link for clicado.

Estou usando http://detectmobilebrowsers.com/ para detectar navegadores móveis, você pode usar o método que preferir

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

Então, basicamente, você cobre todas as suas bases.

tel: funciona em todos os telefones para abrir o discador com o número

callto: funciona no seu computador para conectar-se ao skype do firefox, chrome

Como seria de esperar, o suporte do WebKit tel:se estende também ao navegador móvel Android - FYI

Eu mantenho esta resposta para fins "históricos", mas não a recomendo mais. Veja a resposta @Sidnicious 'acima e minha Atualização 2.

Como parece um empate entre callto e tel caras, quero apresentar uma possível solução na esperança de que seus comentários me tragam de volta ao caminho da luz ;-)

Usando callto:, já que a maioria dos clientes de desktop lidará com isso:

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

Em seguida, se o cliente for um iPhone, substitua os links:

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

Alguma objeção contra esta solução? Devo começar de preferência tel:?

O Mobile Safari (iPhone e iPod Touch) usa o tel:esquema.

Como faço para discar um número de telefone de uma página da Web no iPhone?

RFC3966 define o URI padrão IETF para números de telefone, que é o URI 'tel:'. Esse é o padrão. Não há um padrão semelhante que especifique 'callto:', que é uma convenção específica para o Skype em plataformas em que permite registrar um manipulador de URI para suportá-lo.

isso funcionou para mim:

1. crie um link compatível com os padrões:

        <a href="tel:1500100900">

2. substitua-o quando o navegador móvel não for detectado, por skype:

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

Selecionar link para substituir via classe parece mais eficiente. Claro que funciona apenas em âncoras com .phoneclasse.

Coloquei-o em função if( !isMobile() ) { ...para que seja acionado apenas quando detectar o navegador da área de trabalho. Mas este é provavelmente obsoleto ...

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

Eu usei tel:para o meu projeto.

Funcionou no Chrome, Firefox, IE9 e 8, Chrome mobile e no navegador móvel no meu smartphone Sony Ericsson.

Mas callto:não funcionou nos navegadores móveis.

Eu usaria tel:(como recomendado). Mas, para ter um fallback melhor / não exibir páginas de erro, eu usaria algo assim (usando 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:");
    }
});

A suposição é que os navegadores móveis que possuem um carimbo móvel na string userAgent têm suporte para o tel:protocolo. De resto, substituímos o link pelocallto: protocolo para ter um substituto para o Skype, quando disponível.

Para suprimir páginas de erro para o (s) protocolo (s) não suportado (s), o link é direcionado para um novo iframe oculto.

Infelizmente, não parece possível verificar se o URL foi carregado com sucesso no iframe. Parece que nenhum evento de erro foi disparado.

Desde callto:é por padrão apoiado por skype (criado em configurações do Skype), e outros que também apoiá-lo, eu recomendo usar callto:em vez de skype:.

Embora a Apple recomende tel:em seus documentos para o Mobile Safari, atualmente (iOS 4.3), ela aceita callto:da mesma forma. Portanto, recomendo o uso callto:em um site genérico, pois funciona com o Skype e o iPhone e espero que funcione também em telefones Android.

Atualização (junho de 2013)

Ainda é uma questão de decidir o que você deseja que sua página da web ofereça. Nos meus sites, forneço links tel:e callto:links (os últimos rotulados como Skype), pois os navegadores de desktop no Mac não fazem nada com tel:links, enquanto o Android móvel não faz nada com callto:links. Mesmo o Google Chrome com o plug-in do Google Talk não responde aos tel:links. Ainda assim, prefiro oferecer os dois links na área de trabalho, caso alguém tenha problemas para fazer com que os tel:links funcionem no computador.

Se o design do site determinasse que eu forneça apenas um link, eu usaria um tel:link que tentaria alterar callto:nos navegadores da área de trabalho.

Usando jQuery, substituir todos os números de telefone dos EUA na página com o apropriado callto:ou tel:esquemas.

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

Obrigado a @jonas_jonas pela ideia. Requer a excelente função findAndReplaceDOMText .

Eu uso a <a href="tel:+123456">12 34 56</a>marcação normal e faço com que esses links não sejam clicáveis ​​para usuários de desktop viapointer-events: none;

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

para navegadores que não oferecem suporte a eventos de ponteiro (IE <11), o clique pode ser evitado com JavaScript (o exemplo depende do Modernizr e do jQuery):

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