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

https://stackoverflow.com/questions/226131

03-07-2019
|

Pregunta

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?

Solución

Esto parece ser lo correcto, de acuerdo con 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 " tel " Esquema URI.

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

Otros consejos

Para deshabilitar la apariencia de 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.

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

self.webView.dataDetectorTypes = UIDataDetectorTypeNone;

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

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

Utilizo un carpintero de ancho cero &zwj;

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

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 a su proyecto & # 8217; delegado de la aplicación:

// ...

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

    return [ super webViewDidStartLoad:theWebView ];
}

// ...

fuente: Desactiva 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 elemento <label>. No he probado ninguna otra etiqueta, pero <div> la dejó activa en la pantalla de inicio, incluso con el atributo telephone=no.

Parece obvio de 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 etiqueta <a> con javascript: void(0) como valor href.

Ejemplo de la siguiente manera:
<a href="javascript: void(0)">+44 456 77 89 87</a>

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

Desafortunadamente, ninguno ...

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

ni ...

&#48; = 0
&#57; = 9

... funcionó.

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 espacio 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 necesidad.

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 representa una barra gris de varios píxeles sobre el campo. Pero, es mejor que ver el número como un enlace.

Probé esto 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, la metaetiqueta será ignorada.

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

Ejemplo de algún HTML que desea evitar que se vincule o se formatee 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

Puede intentar codificarlos como entidades HTML:

&#48; = 0
&#57; = 9

El mismo problema en la aplicación Sencha Touch se resolvió con una 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 & Quot; identificar & Quot; 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. Así que 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 enlace tel:, la entidad HTML ⁠ que es la Carácter invisible de Word-Joiner . Traté de mantenerme más semántico (bueno, al menos una especie de) poniendo este carácter en algún lugar de significado, p. 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 escribí: 0613605⁠048⁠8 que se muestra en 0613605 & # 8288; 048 & # 8288; 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 'Guión sin interrupción Unicode')

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 & Lt; fieldset & Gt ;. 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 desde el 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;
}

Divida 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

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow