Wie deaktiviere ich die Verknüpfung von Telefonnummern in Mobile Safari?

363

Safari auf dem iPhone erstellt automatisch Links für Ziffernfolgen, die zu den Telefonnummern angezeigt werden. Ich schreibe eine Webseite mit einer IP-Adresse und Safari verwandelt diese in einen Link mit einer Telefonnummer. Ist es möglich, dieses Verhalten für eine ganze Seite oder ein Element auf einer Seite zu deaktivieren?

Benzado
quelle

Antworten:

714

Dies scheint laut der Safari-HTML-Referenz das Richtige zu sein :

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

Wenn Sie dies deaktivieren, aber dennoch Telefonverbindungen wünschen, können Sie weiterhin das URI-Schema "tel" verwenden.

Hier ist die entsprechende Seite in der Apple Developer Library.

lewinski
quelle
1
Das funktioniert einfach nicht. Jedenfalls nicht für Web-Apps unter iOS 4.3.1.
Mhenry1384
5
4.2.1 auf dem iPhone funktioniert; developer.apple.com/library/ios/#featuredarticles/…
Mark Brackett
2
Ich wollte nur beachten, dass dies auch für neuere Versionen wie 5.1.1 funktioniert, auf denen ich gerade bin.
Dave Stein
4
Kann dies von Fall zu Fall angewendet werden? Beispiel: 1 Ziffernfolge auf einer Seite Ich möchte nicht als Telefonnummer interpretiert werden, aber das Verhalten für 6 andere auf einer Seite beibehalten, die automatisch als Telefonnummer interpretiert werden soll.
jpostdesign
3
Dies funktioniert unter IOS 12 im Jahr 2019 einwandfrei! 👍🏻
Matt Komarnicki
38

Um das Erscheinungsbild der Telefonanalyse für bestimmte Elemente zu deaktivieren, scheint dieses CSS den Trick zu tun:

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

Die erste Regel deaktiviert den Klick, die zweite kümmert sich um das Styling.

Florian Grell
quelle
5
Tolle Lösung, wenn Sie das Styling / Formatieren an einem bestimmten Ort einschränken möchten.
Mikevoermans
36

Ich benutze einen Schreiner mit der Breite Null &zwj;

Tragen Sie das einfach irgendwo in die Telefonnummer ein und es funktioniert für mich. Getestet in BrowserStack (und Litmus für E-Mails).

stickyuser
quelle
1
Das funktioniert bei mir. Ich füge es einfach vor der ersten Nummer hinzu.
Vinboxx
1
Die beste Lösung!
El Cero
Ich habe eine HTML-E-Mail-Signatur erstellt. Dies war die einzige Lösung, mit der verhindert wurde, dass iOS 10-E-Mails eine (Nicht-Telefon-) Nummer fälschlicherweise als Telefonnummer erkennen.
Nick
1
Ordentliche Lösung. Funktionierte gut auf iPhone 6S (+) / iOS 9.
Ain Tohvri
1
Dies ist die einzige praktikable Lösung, wenn Sie Mobile Safari auffordern, eine XML-Datei zu laden, die eine <? Xml-stylesheet> -Anweisung zum Generieren der HTML-Seite verwendet. Mobile Safari konvertiert eine beliebige lange Zahl im ursprünglichen XML in einen "tel:" - Link, obwohl die Quelle nicht HTML (!) Ist.
Mark Reinhold
33

Ich hatte das gleiche Problem. Ich habe in UIWebView eine Eigenschaft gefunden, mit der Sie die Datendetektoren ausschalten können.

self.webView.dataDetectorTypes = UIDataDetectorTypeNone;
Catshow
quelle
Endlich eine Lösung, die für mich funktioniert hat. Dies funktioniert natürlich nur mit Personen, die ihre eigene Objective-C-Anwendung mit UIWebView schreiben, und nicht mit der Safari-App. Vielen Dank!!
iandotkelly
29

Fügen Sie dies hinzu, ich denke, es ist das, wonach Sie suchen:

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

Lösung für Webview!

Für PhoneGap-iPhone / PhoneGap-iOS-Anwendungen können Sie die Erkennung von Telefonnummern deaktivieren, indem Sie dem Anwendungsdelegierten Ihres Projekts Folgendes hinzufügen:

// ...

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

    return [ super webViewDidStartLoad:theWebView ];
}

// ...

Quelle: Deaktivieren Sie die Telefonerkennung in PhoneGap-iOS .

TRiG
quelle
Ging hinein, um den Code von awoodland zu implementieren, bevor ich den Kommentar von badger110 las. Da bin ich also in AppDelegate.m, wenn mir einfällt, dass ich das irgendwo gesehen habe. Ich schaue mich um, finde das Kontrollkästchen in der XIB-Datei und glaube, ich habe gerade etwas Magisches entdeckt. Ich komme zurück, um diese glorreiche Entdeckung zu posten und finde, dass der Kommentar von badger110 die ganze Zeit da war. TL DR: Lies zuerst die Kommentare, du Knöchelkopf.
Tina D.
8

Um die Erkennung von Telefonnummern auf einem Teil einer Seite zu deaktivieren, schließen Sie den betroffenen Text mit href = "#" in ein Ankertag ein. Wenn Sie dies tun, sollten Mobile Safari und UIWebView dies in Ruhe lassen.

<a href="#"> 1234567 </a>
yodaisgreen
quelle
1
Dies ist, was ich letztendlich getan habe, da das metaTag nicht funktioniert hat. Es ist jedoch wahrscheinlich besser, <a href="javascript:;">Nebenwirkungen einer URL-Änderung zu vermeiden.
JustJohn
Dies funktioniert bei mir in HTML-E-Mails. Ich wollte nur eine Telefonnummer deaktivieren, nicht alle. Ich habe gerade den style = "text-decoration: none;" auf das Tag mit der Farbe, die dem Rest des Textes entspricht, und Sie können auch den Cursorstil ändern.
Simon Darby
6

Ich glaube, ich habe eine Lösung gefunden: Setzen Sie die Zahl in ein <label>Element. Ich habe keine anderen Tags ausprobiert, aber <div>auf dem Startbildschirm aktiv gelassen, auch mit dem telephone=noAttribut.

Aus früheren Kommentaren geht hervor, dass das Meta-Tag funktioniert hat, aber aus irgendeinem Grund unter den späteren Versionen von iOS zumindest unter bestimmten Bedingungen nicht funktioniert hat. Ich verwende 4.0.1.

BobFromBris
quelle
Hallo Bob. Wenn Sie HTML-Codebeispiele einfügen möchten, müssen Sie den Code in Backticks einschließen <like this>. (Stack Overflow verwendet eine Formatierungssprache namens Markdown.) Ich werde Ihre Antwort entsprechend bearbeiten.
Paul D. Waite
Das hat letztendlich nicht funktioniert - als ich die App neu geladen habe, war der Link Hiliting wieder da. Ich habe auf das Hinzufügen eines #Zeichens an der Vorderseite der Telefonnummer zurückgegriffen: Laut Apple-Dokument "Apple URL Scheme Reference": "Insbesondere wenn eine URL die Zeichen * oder # enthält, versucht die Telefonanwendung nicht, das entsprechende Zeichen zu wählen Telefonnummer."
BobFromBris
Sie sollten Ihre Antwort entfernen, da dies nicht funktioniert. Wie Sie selbst im obigen Kommentar bestätigen.
Mhenry1384
@ Bob Schöne saubere Spitze. Wir hatten Probleme mit HTML in einer E-Mail. Das Einwickeln in ein Etikett hat gut funktioniert +1, danke
geedubb
6

Sie können das <a>Etikett auch javascript: void(0)als hrefWert verwenden.

Beispiel wie folgt:
<a href="javascript: void(0)">+44 456 77 89 87</a>

Diazwatson
quelle
Dies half mir bei Bedarf, das Standard-iOS-Styling und die Standardaktionen weiterhin zu verwenden, aber bestimmte Elemente zu ignorieren.
GreaterKing
4

Ich hatte das gleiche Problem, aber auf einer iPad-Web-App.

Leider auch nicht ...

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

Noch ...

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

... hat funktioniert.

Aber hier sind drei hässliche Hacks:

  • Ersetzen der Zahl "0" durch den Buchstaben "O"
  • Ersetzen der Zahl "1" durch den Buchstaben "l"
  • Fügen Sie eine bedeutungslose Spanne ein: z. 555.5<span>5</span>5.5555

Abhängig von der verwendeten Schriftart sind die ersten beiden kaum wahrnehmbar. Letzteres beinhaltet offensichtlich überflüssigen Code, ist aber für den Benutzer unsichtbar.

Kludgy hackt mit Sicherheit und ist wahrscheinlich nicht realisierbar, wenn Sie Ihren Code dynamisch aus Daten generieren oder wenn Sie Ihre Daten nicht auf diese Weise verschmutzen können.

Aber zur Not ausreichend.

mattstuehler
quelle
2
"Abhängig von der verwendeten Schriftart sind die ersten beiden kaum wahrnehmbar." Es sei denn, der Benutzer hat iOS so eingestellt , dass er ihnen den Inhalt vorliest . Dann wäre es ziemlich auffällig.
Paul D. Waite
1
Für die Barrierefreiheit (wie der oben erwähnte Textleser) oder wenn der Benutzer in die Telefon-App kopiert / einfügt, werden dadurch nur die Dinge kaputt gemacht. Wenn eine Spinne von Yelp oder Google oder ähnlichem ein Unternehmen indiziert und die falsche Telefonnummer zieht, ist das im Allgemeinen nicht gut.
Jonah
4

Ich hatte eine ABN (Australian Business Number), die iPad Safari unbedingt in eine Telefonnummer verwandeln wollte. Keiner der Vorschläge half. Meine Lösung bestand darin, img-Tags zwischen die Zahlen zu setzen.

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

Die Klasse existiert nur, um zu dokumentieren, wofür die img-Tags bestimmt sind.

Funktioniert auf iPad 1 (4.3.1) und iPad 2 (4.3.3).

mhenry1384
quelle
3
Leider bekomme ich im Internet Explorer diese kaputten Bildsymbole. Das Hinzufügen width="0" height="0"hilft, aber es wird immer noch ein einzelnes Pixel angezeigt.
Geert
1
Sie brauchen keine Bilder, geben Sie einfach HTML in die Nummer ein: <p> Kein Telefon: 112 <span> 34 </ span> 56 </ p>
Radek Pech
@Geert, setze line-heightund font-sizeauf Null.
HelpNeeder
4

Meine Erfahrung ist die gleiche wie bei einigen anderen. Das Meta-Tag ...

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

... funktioniert, wenn die Website in Mobile Safari ausgeführt wird (dh mit Chrome), funktioniert jedoch nicht mehr, wenn sie als Webanwendung ausgeführt wird (dh auf dem Startbildschirm gespeichert und ohne Chrome ausgeführt wird).

Meine weniger als ideale Lösung besteht darin, die Werte in Eingabefelder einzufügen ...

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

Es ist weniger als ideal, da iOS trotz der Einstellung "Keine" einen grauen Balken mit mehreren Pixeln über dem Feld darstellt. Aber es ist besser, als die Nummer als Link zu sehen.

Alan M.
quelle
3

Ich habe dies selbst getestet und festgestellt, dass es funktioniert, obwohl es sicherlich keine elegante Lösung ist. Durch das Einfügen eines leeren Bereichs in die Telefonnummer wird verhindert, dass die Datendetektoren daraus einen Link machen.

(604) 555<span></span> -4321
Jay
quelle
1
Dies ist auch das Update, das ich letztendlich verwendet habe. Es funktioniert sehr gut und ist recht einfach.
Holger
2
Dies ist keine gute Antwort, da Sie absichtlich schlechtes HTML generieren.
stephanfriedrich
2

<meta name = "format-detection" content = "telephone=no"> funktioniert nicht für E-Mails: Wenn der von Ihnen vorbereitete HTML-Code für eine E-Mail bestimmt ist, wird der Metatag ignoriert.

Wenn Sie auf E-Mails abzielen, finden Sie hier eine weitere hässliche, aber funktionierende Lösung für Sie:

Beispiel für HTML, das Sie nicht verknüpfen oder automatisch formatieren möchten:

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

Und das CSS, das die Magie möglich macht:

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

Der Nachteil: Möglicherweise benötigen Sie eine Medienabfrage für jede der Kombinationen aus iPad / iPhone-Hochformat / Querformat

Cabrera
quelle
1

Sie können versuchen, sie als HTML-Entitäten zu codieren:

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

Gleiches Problem in der Sencha Touch App mit Meta Tag gelöst (<meta name="format-detection" content="telephone=no"> ) in der index.html der App .

jemand anderes
quelle
1

Ein Trick, den ich verwende und der nicht nur für Mobile Safari funktioniert, ist die Verwendung von HTML-Escape-Codes und eines kleinen Aufschlags in der Telefonnummer. Dies macht es für den Browser schwieriger, eine Telefonnummer zu "identifizieren", d. H.

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

Auch ich habe dieses Problem: Safari und andere mobile Browser wandeln die Umsatzsteuer-Identifikationsnummer in Telefonnummern um. Ich möchte also eine saubere Methode, um dies bei einem einzelnen Element zu vermeiden, nicht bei der gesamten Seite (oder Site).
Ich teile eine mögliche Lösung, die ich gefunden habe. Sie ist suboptimal, aber dennoch ziemlich praktikabel: Ich habe in die Zahl, die ich nicht als tel:Link verwenden möchte , die &#8288;HTML-Entität eingefügt, bei der es sich um das unsichtbare Word-Joiner-Zeichen handelt . Ich habe versucht, semantischer zu bleiben (zumindest eine Art), indem ich dieses Zeichen an einer bestimmten Stelle platziert habe, z. B. für die Umsatzsteuer-Identifikationsnummer, die ich je nach Format zwischen die verschiedenen Zifferngruppen eingefügt habe, also für eine italienische Umsatzsteuer- ID I. schrieb: 0613605&#8288;048&#8288;8was in 0613605⁠048⁠8 rendert und es nicht in eine Telefonnummer umgewandelt wird.

Kaosmos
quelle
1

Eine andere Möglichkeit besteht darin, die Bindestriche in Ihrer Telefonnummer durch das Zeichen zu ersetzen (U + 2011 'Unicode Non-Breaking Hyphen').

Daniel
quelle
1

Ich war eine Weile wirklich verwirrt, habe es aber endlich herausgefunden. Wir haben unsere Website aktualisiert und einige Nummern in einen Link konvertiert, andere nicht. Es stellt sich heraus, dass Zahlen nicht in einen Link konvertiert werden, wenn sie sich in einem <Feldsatz> befinden. Offensichtlich nicht die richtige Lösung für die meisten Umstände, aber in einigen Fällen wird es die richtige sein.

Oliver P.
quelle
0

Diese Antwort übertrifft alles ab dem 13.06.2012:

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

Ändern Sie die Farbe so, wie es Ihrem Text entspricht. Durch die Textdekoration wird die Unterstreichung entfernt. Zeigerereignisse verhindern, dass sie wie ein Link in einem Browser angezeigt werden (der Zeiger ändert sich nicht in eine Hand.)

Dies ist perfekt für HTML-E-Mails auf iOS und Browser.

Vincent Tobiaz
quelle
1
Sieht für mich so aus, als würde dies die Farbe explizit festlegen. Mit anderen Worten, es wird grau sein, egal was passiert.
Benzado
"Zeigerereignisse verhindern, dass es wie ein Link in einem Browser angezeigt wird" - in einem Browser, der dies unterstützt pointer-events. Wenn der Benutzer Ihre HTML-E-Mails in IE 10 anzeigt, ist dies jedoch nicht gut .
Paul D. Waite
Die Frage betrifft die Unterdrückung der Erkennung von Telefonnummern, nicht die Postanschrift.
JWW
0

Warum sollten Sie die Verknüpfung entfernen wollen, es macht es sehr benutzerfreundlich, die Option zu haben.

Wenn Sie einfach die automatische Bearbeitung entfernen möchten, der Link aber weiterhin funktioniert, fügen Sie ihn einfach in Ihr CSS ein ...

a[href^=tel] {
 color: inherit;
 text-decoration:inherit;
}
Marc
quelle
5
Nun, ich kann nichts über das Originalplakat sagen, aber in meinem Fall vermutet Safari Telefone, bei denen es sich nicht um Telefonnummern handelt, sondern um Finanzdaten
Irae Carvalho,
1
Die Frage betrifft die Linkerkennung von Telefonnummern, nicht deren Bearbeitung.
JWW
In einigen Fällen haben Sie möglicherweise eine Telefonnummer auf einer Website, auf der Sie einen anderen Vorgang ausführen müssen, als einen Anruf zu tätigen, z. B. das Aufrufen einer Option zum Bearbeiten oder das Klicken und Ziehen an eine andere Stelle.
Nosajimiki
er möchte nicht, dass IP-Adressen als Telefonnummern verknüpft werden
Jahller
0

Teilen Sie die Nummer in separate Textblöcke auf

301 <div style="display:inline-block">441</div> 3909
Kareem
quelle
1
Vielleicht möchten Sie erwähnen, dass dies eine Problemumgehung ist.
Daan
-16

Eine andere Lösung wäre die Verwendung eines Abbilds der IP-Nummer

Chris Copland
quelle
4
Ich denke, das ist keine so gute Idee. Bitte löschen Sie Ihre Antwort. Da Sie einen Bildtext nicht kopieren / einfügen können, ist er nicht einfach zu warten (wenn Sie den Inhalt oder den Schriftstil ändern) und auch nicht barrierefrei.
stephanfriedrich
Die Lösung könnte schlimmer sein als das Problem, wie von @stephanfriedrich gesagt, dies wird nicht nützlich oder verwendbar sein
Kaosmos
Überhaupt nicht nützlich.
Luca Antonelli