Como marcar números de telefone?

471

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:

Boldewyn
fonte
1
Infelizmente não. Parece resumir-se ao que o seu provedor (VoiP, telefone celular ou qualquer outra coisa) faz. Isso também pode estar cobrando por 800 números.
Boldewyn
1
Estou usando o Google Voice no Chrome e ele não reconhece tel:URIs. Ainda estou usando callto:e exibindo o número de telefone na teoria de que os navegadores de celular devem detectar automaticamente o número de qualquer maneira.
Old Pro
5
Apesar do título, essa pergunta é realmente "qual esquema de URL você deve usar para números de telefone", e não como marcá-los.
Raedwald
1
O @Boldewyn Skype é solicitado ao usar o Chrome, tel:então talvez você deva remover seu comentário no final sobre o Skype usando callto:?
rybo111
1
Poderia tentar editar as atualizações de suas perguntas nas respostas correspondentes. Assim é uma bagunça.
Idmean 03/08/15

Respostas:

495

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>

s4y
fonte
Obrigado pela resposta detalhada! Desde que fiz a pergunta, fiquei tentado a seguir essa abordagem também. Use o padrão e diga às pessoas queixosas que elas usam o aplicativo / ferramenta ruim. Embora seja difícil, se este é seu cliente, acho que você está certo. Se, no entanto, eu tiver que considerar os usuários do Skype, irei com a minha solução JavaScript ao contrário.
Boldewyn 24/09/09
1
Estamos em 2014 e Tel: agora funciona para o Skype. Mas se você deseja iniciar uma chamada para o Serviço de teste de eco / som do Skype, o link seria <a href="skype:echo123?call"> Ligue para o Serviço de teste de eco / som do Skype </a> em msdn.microsoft. com / pt-br / library / office /…
OzBob
4
Alguém tentou o href="tel://1-555-555-5555"formato? os caras do Tutsplus recomendam code.tutsplus.com/tutorials/…
Adrien Seja
2
Na minha experiência com a tag tel:, o Skype exige que o código do país com um + esteja no número (por exemplo, "+44" para números do Reino Unido) para analisar o número corretamente. Caso contrário, ele apenas abre o Skype, mas não tenta discar.
ShaunUK
3
O exemplo não deveria ser: <a href="tel:+18475555555">? Observe o + antes do 1. inicial)
Stéphane
73

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
Murat
fonte
2
Para adicionar isso, o comportamento é o mesmo para o Google Chrome no Android 4.2.2 (Nexus 4). Ter a versão Android do Skype em execução em segundo plano nem faz callto: os links funcionarem. Em resumo, você não pode realmente usar os links callto: se quiser segmentar dispositivos móveis no momento.
aendrew
Agora no Chrome 35 você receber esse pop-up
pec
No chrome e no firefox (talvez também no IE), você pode registrar um serviço da web para o tel:prefixo no registerProtocolHandler .
Ross Rogers
Você tem que usar o número de telefone + código do país que funciona no chrome. tel: links parecem não funcionar w skype no chrome w / o +
Stas Svishov 21/10
Atualização no OSX e Chrome: solicita o lançamento do Facetime.
Jules
45

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

mordido
fonte
Sim, isso - callto: não funciona no Android (veja meu comentário na resposta de Murat) e tel: não funciona realmente na área de trabalho. É lamentável, realmente.
aendrew
1
Hmmm, infelizmente um jsFiddle rápida não parece deixar este trabalho ou ... jsfiddle.net/tchalvakspam/gVZYt/3
Kzqai
Trabalhando no Seamonkey 2.20 no Mac 10.8, coloque abaixo o <body <?php body_class(); ?>>código no arquivo header.php de um tema do wordpress.
Om01
callto: didnot trabalhou para o Chrome no Mac ea versão é up-to-date
Ujjwal
Infelizmente, isso foi depreciado no JQuery 1.9 jquery.com/upgrade-guide/1.9/#jquery-browser-removed
Casebash
21

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

rymo
fonte
15
Teria sido melhor como um comentário, mas bom saber de qualquer maneira.
o0 '.
10

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

Boldewyn
fonte
Pode ser que o iPhone também suporte o esquema callto, mas a Apple prefere tel, então esse é o mencionado na documentação.
Jan Aagaard
5
Veja minha resposta. callto:é um esquema proprietário de URI, então eu não começaria por aí.
s4y
callto: não funcionou para o chrome no mac e a versão está atualizada.
Ujjwal
Isso não me surpreende. A paisagem era fundamentalmente diferente em 2009, quando a resposta foi dada. Além disso, você precisa de um programa de terceiros, que se registre no callto:esquema, como o Skype. O próprio Chrome não faz ideia do que deve fazer.
Boldewyn
9

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?

Jan Aagaard
fonte
2
Portanto, se os principais usuários segmentados são iPhone ou iPod Tough (e talvez outros dispositivos móveis, não sei ...), você deve usar tel: Se os principais usuários são clientes normais da Web (IE, Firefox etc.) usando o skype ou algum outro software de VoIP, acho que callto: seria melhor.
temor
3

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.

Leroy Jenkins
fonte
Foi o que Sidnicious disse, sim.
Boldewyn
3

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 )
    );
}
devein
fonte
A maneira "correta" de detectar navegadores móveis é verificar a sequência "mobile" que não diferencia maiúsculas de minúsculas.
Kevin Cox
2

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.

fuma
fonte
2

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.

jonas_jonas
fonte
Bom uso de iframes ocultos!
precisa saber é o seguinte
1

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

temor
fonte
3
Aqui eu concordo. Mas todos juntos parecem resumir-se a tel: vs callto: e isso não é fácil.
Boldewyn 24/09/09
1

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.

Old Pro
fonte
1
o navegador de ações na versão mais recente de código aberto do Android "Ice Cream Sandwich" ainda parece suportar apenas tel:; clicar em um callto:link resulta em "Página da Web não disponível"
rymo 17/01
0

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 .

bispo
fonte
1
Essa solução não é ideal, pois a análise da cadeia de caracteres do agente do usuário é considerada uma má prática. Considere um dispositivo que suporte o telURI, mas não se reporte como um celular.
Arturo Torres Sánchez
-1

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;
    });
}
Alex
fonte
1
Usando Modernizr.touchque é suporte de toque Evento ao apoio inferir para tel:não é confiável. Fácil casos de exceção: iPads, tablets Windows, etc.
zachleat
Até o Chrome rodando na área de trabalho do Windows se reporta como um dispositivo de toque.
Arturo Torres Sánchez
Algumas máquinas de classe desktop suportam tel: urls. Para um exemplo específico do Mac, o FaceTime no Mac é padrão e funciona com tel :, chegando ao ponto de usar o iPhone do usuário com Handoff / Continuidade, portanto, usando eventos-ponteiro: nenhum para direcionar os desktops pode não ser mais aconselhável. .
OxC0FFEE 31/01