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

363

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?

benzado
fuente

Respuestas:

714

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.

Lewinski
fuente
1
Esto simplemente no funciona. No para aplicaciones web en iOS 4.3.1 de todos modos.
mhenry1384
55
4.2.1 en iPhone funciona; developer.apple.com/library/ios/#featuredarticles/…
Mark Brackett
2
Solo quería señalar que esto también funciona para versiones recientes, como 5.1.1, en la que estoy ahora.
Dave Stein
44
¿Se puede aplicar caso por caso? Por ejemplo, 1 cadena de número en una página que no quiero que se interprete como un número de teléfono, pero mantengo el comportamiento de otros 6 en una página que quiero que se interprete automáticamente como un número de teléfono.
jpostdesign
3
¡Esto funciona perfectamente bajo IOS 12 en 2019! 👍🏻
Matt Komarnicki
38

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.

Florian Grell
fuente
55
Gran solución donde desea restringir el estilo / formato en una ubicación muy específica.
mikevoermans
36

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

usuario adhesivo
fuente
1
Esto funciona para mi. Solo lo agrego antes del primer número.
vinboxx
1
¡La mejor solucion!
El cero
Creé una firma de correo electrónico HTML y esta fue la única solución que ayudó a evitar que el correo de iOS 10 detecte falsamente un número (no telefónico) como número telefónico.
Nick
1
Solución ordenada Funcionó bien en iPhone 6S (+) / iOS 9.
Ain Tohvri
1
Esta es la única solución viable si le pide a Mobile Safari que cargue un archivo XML que utiliza una directiva <? Xml-stylesheet> para generar la página HTML. Mobile Safari convierte cualquier número largo en el XML original en un enlace "tel:", aunque la fuente no sea HTML (!).
Mark Reinhold
33

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

self.webView.dataDetectorTypes = UIDataDetectorTypeNone;
espectáculo de gatos
fuente
Por fin, una solución que funcionó para mí. Por supuesto, esto solo funcionará con personas que escriben su propia aplicación de Objective-C usando UIWebView, y no usando la aplicación Safari. ¡¡Gracias!!
iandotkelly
29

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

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

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 .

Trigonometría
fuente
Fui a implementar el código de awoodland antes de leer el comentario de badger110. Así que ahí estoy, en AppDelegate.m cuando se me ocurre que he visto esto en alguna parte. Empiezo a mirar alrededor, encuentro la casilla de verificación en el archivo xib y creo que acabo de descubrir algo mágico. Regreso para publicar este glorioso descubrimiento y encuentro que el comentario de badger110 estuvo allí todo el tiempo. TL DR: Lee los comentarios primero, cabeza hueca.
Tina D.
8

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>
yodaisgreen
fuente
1
Esto es lo que terminé haciendo ya que la metaetiqueta no funcionó. Sin embargo, probablemente sea mejor hacerlo <a href="javascript:;">para evitar los efectos secundarios de un cambio de URL.
JustJohn
Esto funciona para mí en correo electrónico HTML. Solo quería deshabilitar un número de teléfono, no todos. Acabo de agregar el estilo = "text-decoration: none;" a la etiqueta con el color para que coincida con el resto del texto, y también puede cambiar el estilo del cursor.
Simon Darby
6

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.

BobFromBris
fuente
Hola Bob. Si usted quiere poner en ejemplos de código HTML, usted tiene que ajustar el código entre comillas sencillas, <like this>. (Stack Overflow utiliza un lenguaje de formato llamado Markdown). Editaré su respuesta en consecuencia.
Paul D. Waite el
En última instancia, eso no funcionó: cuando volví a cargar la aplicación, el enlace hiliting estaba de vuelta. He recurrido a agregar un #carácter al frente del número de teléfono: de acuerdo con el documento de Apple "Referencia del esquema de URL de Apple": "Específicamente, si una URL contiene los caracteres * o #, la aplicación del teléfono no intenta marcar el correspondiente número de teléfono."
BobFromBris
Debes eliminar tu respuesta, ya que no funciona. Como usted mismo reconoce en el comentario anterior.
mhenry1384
@Bob Buen consejo limpio. Tuvimos problemas con HTML en un correo electrónico. Envolver en una etiqueta funcionó bien +1, gracias
geedubb
6

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>

diazwatson
fuente
Esto me ayudó cuando aún necesitaba usar el estilo y las acciones predeterminadas de iOS pero ignorar elementos específicos.
GreaterKing
4

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

Lamentablemente, tampoco ...

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

ni ...

&#48; = 0
&#57; = 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.

Mattstuehler
fuente
2
"Dependiendo de la fuente que use, las dos primeras son apenas perceptibles" A menos que el usuario haya configurado iOS para que les lea el contenido . Entonces sería bastante notable.
Paul D. Waite
1
Para la accesibilidad (como el lector de texto mencionado anteriormente), o si el usuario copia / pega en la aplicación del teléfono, esto simplemente rompe las cosas. Además, en general, si una araña de Yelp o Google o similar está indexando un negocio y extrae el número de teléfono incorrecto, eso no es bueno.
Jonás
4

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

mhenry1384
fuente
3
Desafortunadamente, en Internet Explorer obtengo esos íconos de imágenes rotas. Agregar width="0" height="0"ayuda, pero aún se muestra un solo píxel.
Geert
1
No necesita imágenes, simplemente ponga HTML dentro del número: <p> No es un teléfono: 112 <span> 34 </span> 56 </p>
Radek Pech
@Geert, establecer line-heighty font-sizea cero.
HelpNeeder
4

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.

Alan M.
fuente
3

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
Arrendajo
fuente
1
Esta es también la solución que terminé usando y funciona muy bien y es bastante simple.
Holger
2
Esta no es una buena respuesta, ya que generas HTML mal intencionado.
stephanfriedrich
2

<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

cabrera
fuente
1

Podría intentar codificarlos como entidades HTML:

&#48; = 0
&#57; = 9
Diodeus - James MacFarlane
fuente
1

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.

alguien más
fuente
1

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
Phil LaNasa
fuente
1

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 &#8288;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&#8288;048&#8288;8que se muestra en 0613605⁠048⁠8 y no se transforma en un número de teléfono.

kaosmos
fuente
1

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

Daniel
fuente
1

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.

Oliver P
fuente
0

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.

Vincent Tobiaz
fuente
1
Me parece que esto establece el color explícitamente. En otras palabras, será gris pase lo que pase.
benzado 13/06/12
“Los eventos de puntero evitan que se vea como un enlace en un navegador”, en un navegador que lo admita pointer-events, claro. Sin embargo, si el usuario está viendo sus correos electrónicos HTML en IE 10, no sirve .
Paul D. Waite
La pregunta es sobre la supresión de la detección de números de teléfono, no de direcciones de correo.
jww
0

¿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;
}
Bagazo
fuente
55
bueno, no puedo decir sobre el póster original, pero en mi caso Safari está adivinando teléfonos que en realidad no son números de teléfono, son datos financieros
Irae Carvalho
1
La pregunta es acerca de la detección de enlaces en los números de teléfono, no de editarlos.
jww
En algunos casos, es posible que tenga un número de teléfono en un sitio web en el que necesite realizar otra operación que no sea hacer una llamada telefónica, como abrir una opción para editarlo o la capacidad de hacer clic y arrastrarlo a otro lugar.
Nosajimiki
no quiere tener direcciones IP vinculadas como números de teléfono
jahller
0

Divide el número en bloques de texto separados

301 <div style="display:inline-block">441</div> 3909
Kareem
fuente
1
Es posible que desee mencionar que esta es una solución alternativa.
Daan
-16

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

Chris Copland
fuente
44
Creo que esta no es una idea tan buena. Por favor borre su respuesta. Debido a que no puede copiar / pegar un Texto de imágenes, no es fácil de reparar (si cambia el contenido o el estilo de fuente) y tampoco está libre de barreras.
stephanfriedrich
la solución podría ser peor que el problema, como dijo @stephanfriedrich, esto no va a ser útil ni utilizable
Kaosmos
No es útil en absoluto.
Luca Antonelli