¿Cómo deshabilitar la vinculación de números de teléfono en Mobile Safari?

Safari en iPhone crea automáticamente enlaces para cadenas de dígitos que aparecen en los números de teléfono. Estoy escribiendo una página web que contiene una dirección IP, y Safari la está convirtiendo en un enlace de número de teléfono. ¿Es posible deshabilitar este comportamiento para una página completa o un elemento en una página?

Esto parece ser lo correcto, de acuerdo con la Referencia HTML de Safari :

<meta name="format-detection" content="telephone=no">

Si deshabilita esto pero aún desea enlaces telefónicos, aún puede usar el esquema URI "tel".

Aquí está la página relevante en la Biblioteca de desarrolladores de Apple.

Para deshabilitar la apariencia del análisis del teléfono para elementos específicos, este CSS parece hacer el truco:

.element { pointer-events: none; }
.element > a { text-decoration:none; color:inherit; }

La primera regla desactiva el clic, la segunda se encarga del estilo.

Yo uso un carpintero de ancho cero ‍

Solo pon eso en algún lugar del número de teléfono y me funciona. Probado en BrowserStack (y Litmus para correos electrónicos).

Estaba teniendo el mismo problema. Encontré una propiedad en UIWebView que le permite apagar los detectores de datos.

self.webView.dataDetectorTypes = UIDataDetectorTypeNone;

Agregue esto, creo que es lo que está buscando:

<meta name = "format-detection" content = "telephone=no">

Solución para Webview!

Para las aplicaciones PhoneGap-iPhone / PhoneGap-iOS, puede deshabilitar la detección de números de teléfono agregando lo siguiente al delegado de la aplicación de su proyecto:

// ...

- (void)webViewDidStartLoad:(UIWebView *)theWebView 
{
    // disable telephone detection, basically <meta name="format-detection" content="telephone=no" />
    theWebView.dataDetectorTypes = UIDataDetectorTypeAll ^ UIDataDetectorTypePhoneNumber;

    return [ super webViewDidStartLoad:theWebView ];
}

// ...

fuente: Desactivar la detección telefónica en PhoneGap-iOS .

Para deshabilitar la detección del número de teléfono en parte de una página, envuelva el texto afectado en una etiqueta de anclaje con href = "#". Si hace esto, Safari móvil y UIWebView deberían dejarlo solo.

<a href="#"> 1234567 </a>

Creo que he encontrado una solución: poner el número dentro de un <label>elemento. No he probado ninguna otra etiqueta, pero la <div>dejé activa en la pantalla de inicio, incluso con eltelephone=no atributo.

Parece obvio por los comentarios anteriores que la metaetiqueta funcionó, pero por alguna razón se ha roto en las versiones posteriores de iOS, al menos en algunas condiciones. Estoy ejecutando 4.0.1.

También puede usar la <a>etiqueta con javascript: void(0)como hrefvalor.

Ejemplo como sigue:
<a href="javascript: void(0)">+44 456 77 89 87</a>

Tuve el mismo problema, pero en una aplicación web para iPad.

Lamentablemente, tampoco ...

 <meta name = "format-detection" content = "telephone=no">

ni ...

0 = 0
9 = 9

... trabajó.

Pero, aquí hay tres trucos feos:

• reemplazando el número "0" con la letra "O"
• reemplazando el número "1" con la letra "l"
• inserte un lapso sin sentido: por ejemplo, 555.5<span>5</span>5.5555

Dependiendo de la fuente que use, los dos primeros apenas se notan. Este último obviamente implica código superfluo, pero es invisible para el usuario.

Kludgy piratea con seguridad, y probablemente no sea viable si está generando su código dinámicamente a partir de datos, o si no puede contaminar sus datos de esta manera.

Pero, suficiente en caso de apuro.

Tenía un ABN (número comercial australiano) que iPad Safari insistió en convertir en un enlace de número de teléfono. Ninguna de las sugerencias ayudó. Mi solución fue poner etiquetas img entre los números.

ABN 98<img class="PreventSafariFromTurningIntoLink" /> 009<img /> 675<img /> 709

La clase existe solo para documentar para qué son las etiquetas img.

Funciona en iPad 1 (4.3.1) y iPad 2 (4.3.3).

Mi experiencia es la misma que algunas otras mencionadas. La metaetiqueta ...

<meta name = "format-detection" content = "telephone=no">

... funciona cuando el sitio web se ejecuta en Mobile Safari (es decir, con Chrome) pero deja de funcionar cuando se ejecuta como una aplicación web (es decir, se guarda en la pantalla de inicio y se ejecuta sin Chrome).

Mi solución menos que ideal es insertar los valores en los campos de entrada ...

<input type="text" readonly="readonly" style="border:none;" value="3105551212">

Es menos que ideal porque, a pesar de que el borde no está configurado, iOS muestra una barra gris de varios píxeles sobre el campo. Pero, es mejor que ver el número como un enlace.

Lo probé yo mismo y descubrí que funciona, aunque ciertamente no es una solución elegante. Insertar un espacio vacío en el número de teléfono evitará que los detectores de datos lo conviertan en un enlace.

(604) 555<span></span> -4321

<meta name = "format-detection" content = "telephone=no"> no funciona para correos electrónicos: si el HTML que está preparando es para un correo electrónico, se ignorará la metaetiqueta.

Si lo que estás buscando son correos electrónicos, aquí hay otra solución fea pero que funciona para ti:

Ejemplo de algunos HTML que desea evitar que estén vinculados o formateados automáticamente:

will cease operations <span class='ios-avoid-format'>on June 1,
2012</span><span></span>.

Y el CSS que hará que la magia suceda:

@media only screen and (device-width: 768px) and (orientation:portrait){
span.ios-date{display:none;}
span.ios-date + span:after{content:"on June 1, 2012";}
}

El inconveniente: es posible que necesite una consulta de medios para cada uno de los combinados de ipad / iphone vertical / horizontal

Podría intentar codificarlos como entidades HTML:

0 = 0
9 = 9

El mismo problema en la aplicación Sencha Touch se resolvió con metaetiqueta ( <meta name="format-detection" content="telephone=no">) en index.html de la aplicación.

Un truco que uso que funciona en algo más que Mobile Safari es usar códigos de escape HTML y una pequeña marca en el número de teléfono. Esto hace que sea más difícil para el navegador "identificar" un número de teléfono, es decir

Phone: 1-8&#48;&#48;<span>-</span>62&#48;<span>-</span>38&#48;3

Yo también tengo este problema: Safari y otros navegadores móviles transforman los ID de IVA en números de teléfono. Por lo tanto, quiero un método limpio para evitarlo en un solo elemento, no en toda la página (o sitio).
Estoy compartiendo una posible solución que encontré, es subóptima pero aún así es bastante viable: pongo, dentro del número que no quiero convertirme en un tel:enlace, la ⁠entidad HTML que es el carácter invisible de Word-Joiner . Intenté ser más semántico (bueno, al menos una especie de) colocando este carácter en algún lugar de significado, por ejemplo, para el ID de IVA, elegí ponerlo entre los diferentes grupos de dígitos de acuerdo con su formato, por lo que para un IVA italiano I escribió: 0613605⁠048⁠8que se muestra en 0613605⁠048⁠8 y no se transforma en un número de teléfono.

Otra opción es reemplazar los guiones en su número de teléfono por el carácter ‑(U + 2011 'Unicode Non-Breaking Hyphen')

Estaba realmente confundido por esto por un tiempo, pero finalmente lo descubrí. Hicimos actualizaciones en nuestro sitio y algunos números se convirtieron en un enlace y otros no. Resulta que los números no se convertirán en un enlace si están en un <fieldset>. Obviamente no es la solución correcta para la mayoría de las circunstancias, pero en algunas será la correcta.

Esta respuesta triunfa sobre todo al 13/13-2012:

<a href="#" style="color: #666666; 
                   text-decoration: none;
                   pointer-events: none;">
  Boca Raton, FL 33487
</a>

Cambie el color a lo que coincida con su texto, la decoración del texto elimina el subrayado, los eventos de puntero evitan que se vea como un enlace en un navegador (el puntero no cambia a una mano)

Esto es perfecto para correos electrónicos HTML en iOS y navegador.

¿Por qué querrías eliminar el enlace? Es muy fácil de usar tener la opción.

Si simplemente desea eliminar la edición automática, pero mantener el enlace funcionando, simplemente agregue esto a su CSS ...

a[href^=tel] {
 color: inherit;
 text-decoration:inherit;
}

Divide el número en bloques de texto separados

301 <div style="display:inline-block">441</div> 3909

Otra solución sería usar una imagen del número de IP