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

https://stackoverflow.com/questions/226131

03-07-2019
|

Domanda

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?

Soluzione

Questa sembra essere la cosa giusta da fare, secondo Riferimento HTML Safari :

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

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

Ecco il pagina pertinente nella libreria per sviluppatori Apple.

Altri suggerimenti

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.

Stavo avendo 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">

Uso un falegname a larghezza zero &zwj;

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

Soluzione per Webview!

Per le applicazioni PhoneGap-iPhone / PhoneGap-iOS, puoi disabilitare il rilevamento del numero di telefono aggiungendo quanto segue al tuo delegato dell'applicazione & # 8217;

// ...

- (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 rilevamento telefonico 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 elemento <label>. Non ho provato nessun altro tag, ma <div> lo ha lasciato attivo sulla schermata principale, anche con l'attributo telephone=no.

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 eseguendo 4.0.1.

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

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

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

... ha funzionato.

Ma, ecco tre brutti hack:

sostituendo il numero " 0 " con la lettera " O "
sostituendo il numero " 1 " con la lettera " l "
inserisci 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 all'utente.

Gli hack di Kludgy sono sicuramente sicuri e probabilmente non praticabili se stai generando il tuo codice in modo dinamico dai dati o se non puoi inquinare i tuoi dati in questo modo.

Ma, basta 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 (ovvero 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">

È tutt'altro che ideale perché, nonostante il bordo sia impostato su nessuno, iOS visualizza una barra grigia a più 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 le 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";}
}

L'inconveniente: potrebbe essere necessaria una query multimediale per ciascuna delle combinazioni di ipad / iphone verticale / orizzontale

Potresti provare a codificarli come entità HTML:

&#48; = 0
&#57; = 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 non solo su Safari per dispositivi mobili consiste nell'utilizzare codici di escape HTML e un piccolo markup nel numero di telefono. Ciò rende più difficile per il browser & Quot; identificare & Quot; un numero di telefono, ad esempio

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 collegamento tel:, l'entità HTML ⁠ che è la Personaggio invisibile di Word-Joiner . Ho cercato di rimanere più semantico (beh, almeno una sorta di) inserendo questo carattere in qualche punto significativo, ad es. per l'IVA ho scelto di inserirlo tra i diversi gruppi di cifre secondo il suo formato per una partita IVA italiana ho scritto: 0613605⁠048⁠8 che viene visualizzato in 0613605 & # 8288; 048 & # 8288; 8 e non viene trasformato 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 & Lt; fieldset & Gt ;. 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 qualsiasi corrispondenza con il 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 email HTML su iOS e browser.

Perché dovresti voler 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

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a StackOverflow