Come disabilitare il collegamento dei numeri di telefono in Mobile Safari?

Safari su iPhone crea automaticamente collegamenti per stringhe di cifre che appaiono ai numeri di telefono. Sto scrivendo una pagina web contenente un indirizzo IP e Safari lo sta trasformando in un collegamento al numero di telefono. È possibile disabilitare questo comportamento per un'intera pagina o un elemento in una pagina?

Questa sembra essere la cosa giusta da fare, secondo il riferimento HTML di Safari :

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

Se lo disabiliti ma desideri comunque i collegamenti telefonici, puoi comunque utilizzare lo schema URI "tel".

Ecco la pagina pertinente nella libreria per gli sviluppatori di Apple.

Per disabilitare l'aspetto dell'analisi del telefono per elementi specifici, questo CSS sembra fare il trucco:

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

La prima regola disattiva il clic, la seconda si occupa dello stile.

Uso un falegname a larghezza zero ‍

Mettilo da qualche parte nel numero di telefono e funziona per me. Testato in BrowserStack (e tornasole per le e-mail).

Avevo lo stesso problema. Ho trovato una proprietà su UIWebView che ti consente di disattivare i rilevatori di dati.

self.webView.dataDetectorTypes = UIDataDetectorTypeNone;

Aggiungi questo, penso che sia quello che stai cercando:

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

Soluzione per Webview!

Per le applicazioni PhoneGap-iPhone / PhoneGap-iOS, è possibile disabilitare il rilevamento del numero di telefono aggiungendo quanto segue al delegato dell'applicazione del progetto:

// ...

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

    return [ super webViewDidStartLoad:theWebView ];
}

// ...

fonte: disabilita il rilevamento del telefono in PhoneGap-iOS .

Per disabilitare il rilevamento del numero di telefono su una parte di una pagina, avvolgere il testo interessato in un tag di ancoraggio con href = "#". In questo caso, Safari mobile e UIWebView dovrebbero lasciarlo in pace.

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

Penso di aver trovato una soluzione: inserisci il numero all'interno di un <label>elemento. Non ho provato nessun altro tag, ma l' <div>ho lasciato attivo sulla schermata principale, anche con iltelephone=no attributo.

Sembra ovvio da precedenti commenti che il meta tag ha funzionato, ma per qualche ragione si è rotto nelle versioni successive di iOS, almeno in alcune condizioni. Sto correndo 4.0.1.

Puoi anche usare l' <a>etichetta javascript: void(0)come hrefvalore.

Esempio come segue:
<a href="javascript: void(0)">+44 456 77 89 87</a>

Ho avuto lo stesso problema, ma su un'app Web per iPad.

Sfortunatamente, né ...

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

né ...

0 = 0
9 = 9

... lavorato.

Ma, ecco tre brutti hack:

• sostituendo il numero "0" con la lettera "O"
• sostituendo il numero "1" con la lettera "l"
• inserire un intervallo senza significato: ad es. 555.5<span>5</span>5.5555

A seconda del carattere utilizzato, i primi due sono appena percettibili. Quest'ultimo comporta ovviamente codice superfluo, ma è invisibile per l'utente.

Kludgy è sicuro, e probabilmente non è praticabile se stai generando il tuo codice in modo dinamico dai dati, o se non puoi inquinare i tuoi dati in questo modo.

Ma, sufficiente in un pizzico.

Avevo un ABN (Australian Business Number) che iPad Safari ha insistito per trasformare in un collegamento di numero di telefono. Nessuno dei suggerimenti ha aiutato. La mia soluzione era quella di mettere i tag img tra i numeri.

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

La classe esiste solo per documentare a cosa servono i tag img.

Funziona su iPad 1 (4.3.1) e iPad 2 (4.3.3).

La mia esperienza è la stessa di altri citati. Il meta tag ...

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

... funziona quando il sito Web è in esecuzione in Mobile Safari (ad es. con Chrome) ma smette di funzionare quando viene eseguito come webapp (ad es. viene salvato nella schermata principale e funziona senza Chrome).

La mia soluzione tutt'altro che ideale è quella di inserire i valori nei campi di input ...

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

È meno che ideale perché, nonostante il bordo sia impostato su nessuno, iOS visualizza una barra grigia multi-pixel sopra il campo. Ma è meglio che vedere il numero come un link.

L'ho provato io stesso e ho scoperto che funziona anche se non è certamente una soluzione elegante. L'inserimento di un intervallo vuoto nel numero di telefono impedirà ai rilevatori di dati di trasformarlo in un collegamento.

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

<meta name = "format-detection" content = "telephone=no"> non funziona per le e-mail: se l'HTML che stai preparando è per una e-mail, il metatag verrà ignorato.

Se ciò che stai prendendo di mira sono e-mail, ecco l'ennesima brutta soluzione per te:

Esempio di HTML che si desidera evitare di essere collegati o formattati automaticamente:

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

E i CSS che faranno accadere la magia:

@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";}
}

Lo svantaggio: potresti aver bisogno di una query multimediale per ciascuna delle combinazioni ipad / iphone verticale / orizzontale

Potresti provare a codificarli come entità HTML:

0 = 0
9 = 9

Stesso problema nell'app Sencha Touch risolto con meta tag ( <meta name="format-detection" content="telephone=no">) in index.html dell'app.

Un trucco che uso su più di Mobile Safari è usare codici di escape HTML e un piccolo mark-up nel numero di telefono. Ciò rende più difficile per il browser "identificare" un numero di telefono, ad es

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

Anch'io ho questo problema: Safari e altri browser mobili trasformano gli ID IVA in numeri di telefono. Quindi voglio un metodo pulito per evitarlo su un singolo elemento, non sull'intera pagina (o sito).
Sto condividendo una possibile soluzione che ho trovato, non è ottimale ma è ancora abbastanza praticabile: inserisco, all'interno del numero che non voglio diventare un tel:collegamento, il⁠ entità HTML che è il carattere invisibile di Word-Joiner . Ho cercato di rimanere più semantico (beh, almeno una sorta di) inserendo questo carattere in qualche punto significativo, ad esempio per l'IVA che ho scelto di metterlo tra i diversi gruppi di cifre in base al suo formato, quindi per un'IVA italiana I ha scritto: 0613605⁠048⁠8che rende in 0613605⁠048⁠8 e non si trasforma in un numero di telefono.

Un'altra opzione è quella di sostituire i trattini nel tuo numero di telefono con il carattere ‑(U + 2011 'Unicode Non-Breaking Hyphen')

Ne sono rimasto davvero confuso per un po 'ma alla fine l'ho capito. Abbiamo apportato aggiornamenti al nostro sito e alcuni numeri sono stati convertiti in un collegamento e altri no. Si scopre che i numeri non verranno convertiti in un collegamento se si trovano in un <campo>. Ovviamente non è la soluzione giusta per la maggior parte delle circostanze, ma in alcuni sarà quella giusta.

Questa risposta ha la meglio su 6-13-2012:

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

Cambia il colore in qualunque cosa corrisponda al tuo testo, la decorazione del testo rimuove la sottolineatura, gli eventi del puntatore ne impediscono la visualizzazione come un collegamento in un browser (il puntatore non si trasforma in una mano)

Questo è perfetto per le e-mail HTML su iOS e browser.

Perché vorresti rimuovere il collegamento, rende molto facile avere l'eoption.

Se vuoi semplicemente rimuovere la modifica automatica, ma mantieni il collegamento funzionante, aggiungi questo nel tuo CSS ...

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

Suddividi il numero in blocchi di testo separati

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

Un'altra soluzione sarebbe quella di utilizzare un'immagine del numero IP