¿Cómo marcar números de teléfono?

Quiero marcar un número de teléfono como enlace invocable en un documento HTML. He leído el enfoque de los microformatos , y sé que el tel:esquema sería estándar, pero literalmente no está implementado en ninguna parte.

Skype define, hasta donde yo sé, skype:y callto:este último ha ganado algo de popularidad. Supongo que otras compañías tienen otros esquemas o se suben al callto:tren.

¿Cuál sería una práctica recomendada para marcar un número de teléfono, de modo que el mayor número posible de personas con el software VoIP pueda hacer clic en un enlace para recibir una llamada?

Pregunta adicional: ¿Alguien sabe acerca de las complicaciones con los números de emergencia como el 911 en EE. UU. O el 110 en Alemania?

Salud,

Actualización: Microsoft NetMeeting toma callto:esquemas bajo WinXP. Esta pregunta sugiere que Microsoft Office Communicator manejará tel:esquemas pero no los callto:uno. Genial, Redmond!

Actualización 2: Dos años y medio más tarde ahora. Parece reducirse a lo que quieres hacer con el número. En el contexto móvil, tel:es el camino a seguir. Dirigirse a los escritorios depende de usted, si cree que sus usuarios son más personas de Skype ( callto:) o es más probable que tengan tel:instalado algo como Google Voice ( ). Mi opinión personal es, cuando tenga dudas, use tel:(en línea con la respuesta de @Sidnicious).

Actualización 3: El usuario @ rybo111 señaló que Skype en Chrome, mientras tanto, se subió al tel:carro. No puedo verificar esto, porque no hay una máquina con ambos a la mano, pero si es cierto, significa que finalmente tenemos un ganador aquí:tel:

El tel:esquema se utilizó a fines de la década de 1990 y se documentó a principios de 2000 con RFC 2806 (que fue obsoleto por el RFC 3966 más exhaustivo en 2004) y continúa mejorando . Apoyar tel:en el iPhone no fue una decisión arbitraria.

callto:, aunque es compatible con Skype, no es un estándar y debe evitarse a menos que se oriente específicamente a los usuarios de Skype.

¿Yo? Acabo de comenzar a incluir tel:URI correctamente formados en sus páginas (sin oler al agente de usuario) y esperar a que el resto de los teléfonos del mundo se pongan al día :).

Ejemplo :

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

Los resultados de mi prueba:

llamar a:

• Navegador Nokia: no pasa nada
• Google Chrome: pide ejecutar Skype para llamar al número
• Firefox: pide elegir un programa para llamar al número
• IE: pide ejecutar Skype para llamar al número

tel:

• Nokia Browser: trabajando
• Google Chrome: no pasa nada
• Firefox: "Firefox no sabe cómo abrir esta url"
• IE: no se pudo encontrar la URL

La mejor apuesta es comenzar con tel: que funciona en todos los móviles

Luego ingrese este código, que solo se ejecutará en un escritorio y solo cuando se haga clic en un enlace.

Estoy usando http://detectmobilebrowsers.com/ para detectar navegadores móviles, puede usar el método que prefiera

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

Así que básicamente cubres todas tus bases.

tel: funciona en todos los teléfonos para abrir el marcador con el número

callto: funciona en su computadora para conectarse a skype desde firefox, chrome

Como era de esperar, el soporte de WebKit también se tel:extiende al navegador móvil de Android

Mantengo esta respuesta con un propósito "histórico" pero ya no la recomiendo. Vea la respuesta @Sidnicious 'arriba y mi Actualización 2.

Dado que parece un empate entre callto y tel boys, quiero lanzar una posible solución con la esperanza de que sus comentarios me traigan de vuelta en el camino de la luz ;-)

Utilizando callto:, ya que la mayoría de los clientes de escritorio lo manejarán:

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

Luego, si el cliente es un iPhone, reemplace los enlaces:

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

¿Alguna objeción contra esta solución? ¿Debo comenzar preferiblemente tel:?

Safari móvil (iPhone y iPod Touch) utiliza el tel:esquema.

¿Cómo marco un número de teléfono desde una página web en iPhone?

RFC3966 define el URI estándar IETF para números de teléfono, es decir, el URI 'tel:'. Ese es el estándar. No hay un estándar similar que especifique 'callto:', esa es una convención particular para Skype en plataformas donde permite registrar un controlador URI para admitirlo.

esto funcionó para mí:

1.hacer un enlace compatible con los estándares:

        <a href="tel:1500100900">

2. Reemplácelo cuando no se detecte el navegador móvil, para Skype:

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

Seleccionar el enlace para reemplazar a través de la clase parece más eficiente. Por supuesto, solo funciona en anclajes con .phoneclase.

Lo he puesto en funcionamiento if( !isMobile() ) { ...para que se active solo cuando detecte el navegador de escritorio. Pero este es probablemente 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 )
    );
}

solía tel: para mi proyecto.

Funcionó en Chrome, Firefox, IE9 y 8, Chrome Mobile y el navegador móvil en mi teléfono inteligente Sony Ericsson.

Pero callto:no funcionó en los navegadores móviles.

Yo usaría tel:(según lo recomendado). Pero para tener una mejor alternativa / no mostrar páginas de error, usaría algo como esto (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:");
    }
});

La suposición es que los navegadores móviles que tienen un sello móvil en la cadena de agente de usuario tienen soporte para el tel:protocolo. Por lo demás, reemplazamos el enlace con el callto:protocolo para tener una alternativa a Skype donde esté disponible.

Para suprimir páginas de error para los protocolos no compatibles, el enlace está dirigido a un nuevo iframe oculto.

Desafortunadamente, no parece posible verificar si la url se ha cargado correctamente en el iframe. Parece que no se disparan eventos de error.

Como callto:por defecto es compatible con Skype (configurado en la configuración de Skype), y otros también lo admiten, recomendaría usar en callto:lugar de skype:.

Aunque Apple recomienda tel:en sus documentos para Mobile Safari, actualmente (iOS 4.3) acepta callto:lo mismo. Por lo tanto, recomiendo usar callto:en un sitio web genérico, ya que funciona tanto con Skype como con iPhone y espero que también funcione en teléfonos Android.

Actualización (junio de 2013)

Esto sigue siendo una cuestión de decidir qué desea que ofrezca su página web. En mis sitios web proporciono ambos tel:y callto:enlaces (este último etiquetado como para Skype) ya que los navegadores de escritorio en Mac no hacen nada con tel:enlaces, mientras que Android móvil no hace nada con callto:enlaces. Incluso Google Chrome con el complemento Google Talk no responde a los tel:enlaces. Aún así, prefiero ofrecer ambos enlaces en el escritorio en caso de que alguien se haya tomado la molestia de obtenertel: enlaces funcionen en su computadora.

Si el diseño del sitio indicara que solo proporciono un enlace, usaría un tel:enlace que trataría de cambiar callto:en los navegadores de escritorio.

Con jQuery, reemplace todos los números de teléfono de EE. UU. En la página con los esquemas callto:o tel:esquemas apropiados .

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

Gracias a @jonas_jonas por la idea. Requiere la excelente función findAndReplaceDOMText .

Utilizo el <a href="tel:+123456">12 34 56</a>marcado normal y hago que esos enlaces sean inaccesibles para usuarios de escritorio a través depointer-events: none;

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

Para los navegadores que no admiten eventos de puntero (IE <11), el clic se puede evitar con JavaScript (el ejemplo se basa en Modernizr y jQuery):

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