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


471

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:


1
Lamentablemente no. Parece reducirse a lo que hace su proveedor (VoiP, comp de teléfono celular o lo que sea). Esto también podría estar cobrando por 800 números.
Boldewyn

1
Estoy usando Google Voice en Chrome y no reconoce los tel:URI. Todavía me quedo con callto:y una pantalla del número de teléfono en la teoría de que los navegadores de teléfonos móviles deberían detectar automáticamente el número de todos modos.
Old Pro

55
A pesar del título, esta pregunta es realmente "qué esquema de URL debe usar para los números de teléfono", en lugar de cómo marcarlos.
Raedwald

1
@Boldewyn Skype se le solicita cuando usa Chrome con, ¿ tel:quizás debería eliminar su comentario al final sobre Skype usando callto:?
rybo111

1
¿Podría intentar editar las actualizaciones de sus preguntas en las respuestas correspondientes? Así es como un desastre.
idmean

Respuestas:


495

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>


¡Gracias por la respuesta detallada! Desde que hice la pregunta, tuve la tentación de seguir este enfoque también. Use el estándar y diga a las personas que se quejan que usan la aplicación / herramienta incorrecta. Aunque se pone difícil, si este es tu cliente, creo que tienes razón. Si, sin embargo, tengo que considerar a los usuarios de Skype, iré con mi solución de JavaScript al revés.
Boldewyn

1
Es 2014 y Tel: ahora funciona para Skype. Pero si desea iniciar una llamada al Servicio de prueba de eco / sonido de Skype, el enlace sería <a href="skype:echo123?call"> Llame al Servicio de prueba de eco / sonido de Skype </a> desde msdn.microsoft. com / es-us / library / office / ...
OzBob

44
¿Alguien ha intentado href="tel://1-555-555-5555"formatear? los chicos de Tutsplus lo recomiendan code.tutsplus.com/tutorials/…
Adrien Be

2
En mi experiencia con el tel: tag Skype requiere que el código del país con un + esté en el número (por ejemplo, "+44" para números del Reino Unido) para analizar el número correctamente. De lo contrario, solo abre Skype pero no intenta marcar.
ShaunUK

3
¿No debería ser el ejemplo: <a href="tel:+18475555555">? Tenga en cuenta el + antes de la inicial 1.)
Stéphane

73

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

2
Para agregar a esto, el comportamiento es el mismo para Google Chrome en Android 4.2.2 (Nexus 4). Tener la versión de Android de Skype ejecutándose en segundo plano ni siquiera hace que callto: enlaces funcionen. En resumen, no puedes usar callto: links si quieres apuntar a dispositivos móviles en el momento.
aendrew

Ahora en Chrome 35 obtienes esta ventana emergente
pec

En Chrome y Firefox (tal vez también IE), puede registrar un servicio web suyo para el tel:prefijo con registerProtocolHandler .
Ross Rogers

U tiene que usar el número de teléfono + countrycode que funciona en Chrome. tel: los enlaces no parecen funcionar con Skype en Chrome sin +
Stas Svishov

Actualización en OSX y Chrome: pide iniciar Facetime.
Jules

45

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


Sí, esto: callto: no funciona en absoluto en Android (vea mi comentario sobre la respuesta de Murat), y tel: realmente no funciona en el escritorio. Es desafortunado, de verdad.
aendrew

1
Hmmm, lamentablemente un rápido jsfiddle tampoco parece permitir que esto funcione ... jsfiddle.net/tchalvakspam/gVZYt/3
Kzqai

Al trabajar en Seamonkey 2.20 en Mac 10.8, coloque debajo del <body <?php body_class(); ?>>código en el archivo header.php de un tema de WordPress.
om01

callto: no funcionó para Chrome en Mac y la versión está actualizada
Ujjwal

Lamentablemente, esto se ha depreciado en JQuery 1.9 jquery.com/upgrade-guide/1.9/#jquery-browser-removed
Casebash

21

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


15
Hubiera sido mejor como comentario, pero está bien saberlo de todos modos.
o0 '.

10

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


Podría ser que el iPhone también sea compatible con el esquema callto, pero que Apple prefiere el teléfono, por lo que ese es el mencionado en la documentación.
Jan Aagaard el

55
Mira mi respuesta. callto:es un esquema URI patentado, por lo que no comenzaría allí.
s4y

callto: no funcionó para Chrome en Mac y la versión está actualizada.
Ujjwal

Eso no me sorprende. El panorama era fundamentalmente diferente en 2009, cuando se dio la respuesta. Además, necesita un programa de terceros, que se registre para el callto:esquema, como Skype. Chrome no tiene idea de lo que debería hacer.
Boldewyn


3

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.


Eso es lo que dijo Sidnicious, sí.
Boldewyn

3

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

La forma "correcta" de detectar navegadores móviles es verificar si la cadena no distingue entre mayúsculas y minúsculas "mobile".
Kevin Cox

2

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.


2

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.


Buen uso de iframes ocultos!
Boldewyn el

1

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


3
Aquí estoy de acuerdo. Pero en conjunto parece reducirse a tel: vs callto :, y eso no es fácil.
Boldewyn

1

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.


1
el navegador de stock en la última versión de código abierto de Android "Ice Cream Sandwich" todavía parece admitir solo tel:; al hacer clic en un callto:enlace
aparece

0

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 .


1
Esta solución no es ideal, ya que analizar la cadena del agente de usuario se considera una mala práctica. Considere un dispositivo que admita el telURI pero que no se informe como un dispositivo móvil.
Arturo Torres Sánchez

-1

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

1
El uso de Modernizr.touchcuál es el soporte de Touch Event para inferir el soporte tel:no es confiable. Casos de excepción fáciles: iPad, tabletas Windows, etc.
zachleat

Incluso Chrome que se ejecuta en un escritorio de Windows se presenta como un dispositivo táctil.
Arturo Torres Sánchez

Algunas máquinas de escritorio admiten tel: urls. Para un ejemplo específico de Mac, FaceTime en Mac es estándar y funciona con tel :, yendo tan lejos como para usar el iPhone del usuario con Handoff / Continuity, por lo que usar eventos de puntero: ninguno para apuntar a los escritorios podría no ser aconsejable. .
OxC0FFEE
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.