Jak wyłączyć łączenie numerów telefonów w Mobile Safari?


Odpowiedzi:


714

To wydaje się być słuszne, według Reference Safari HTML :

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

Jeśli to wyłączysz, ale nadal chcesz mieć łącza telefoniczne, nadal możesz używać schematu URI „tel”.

Oto odpowiednia strona w bibliotece programistów Apple.


1
To po prostu nie działa. W każdym razie nie dla aplikacji internetowych na iOS 4.3.1.
mhenry1384


2
Chciałem tylko zauważyć, że działa to również w najnowszych wersjach, takich jak 5.1.1, które teraz używam.
Dave Stein

4
Czy można to zastosować indywidualnie dla każdego przypadku? Na przykład 1 ciąg liczbowy na stronie Nie chcę być interpretowany jako numer telefonu, ale zachowujesz zachowanie 6 innych osób na stronie, którą chcę automatycznie interpretować jako numer telefonu?
jpostdesign

3
Działa to doskonale w systemie iOS 12 w 2019 roku! 👍🏻
Matt Komarnicki

38

Aby wyłączyć wygląd parsowania telefonu dla określonych elementów, ten CSS wydaje się załatwić sprawę:

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

Pierwsza reguła wyłącza kliknięcie, druga zajmuje się stylizacją.


5
Świetne rozwiązanie, w którym chcesz ograniczyć stylizację / formatowanie w bardzo konkretnej lokalizacji.
mikevoermans

36

Używam stolarki o zerowej szerokości &zwj;

Po prostu umieść to gdzieś w numerze telefonu i to działa dla mnie. Testowane w BrowserStack (i Litmus dla wiadomości e-mail).


1
To działa dla mnie. Po prostu dodaję go przed pierwszym numerem.
vinboxx

1
Najlepszym rozwiązaniem!
El cero

Utworzyłem podpis e-mail w formacie HTML i było to jedyne rozwiązanie, które zapobiegło fałszywemu wykrywaniu numeru (nie telefonu) jako numeru telefonu.
Nick

1
Schludne rozwiązanie. Działa dobrze na iPhone 6S (+) / iOS 9.
Ain Tohvri

1
Jest to jedyne wykonalne rozwiązanie, jeśli poprosisz Mobile Safari o załadowanie pliku XML, który używa dyrektywy <? Xml-stylesheet> do wygenerowania strony HTML. Mobile Safari konwertuje dowolne długie liczby w oryginalnym pliku XML na link „tel:”, nawet jeśli źródłem nie jest HTML (!).
Mark Reinhold

33

Miałem ten sam problem. Znalazłem właściwość na UIWebView, która pozwala wyłączyć detektory danych.

self.webView.dataDetectorTypes = UIDataDetectorTypeNone;

Wreszcie rozwiązanie, które zadziałało dla mnie. Oczywiście będzie to działać tylko w przypadku osób, które piszą własną aplikację celu c za pomocą UIWebView, a nie używają aplikacji Safari. Dzięki!!
iandotkelly,


10

Rozwiązanie dla Webview!

W przypadku aplikacji PhoneGap-iPhone / PhoneGap-iOS można wyłączyć wykrywanie numeru telefonu, dodając następujące elementy do delegata aplikacji projektu:

// ...

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

    return [ super webViewDidStartLoad:theWebView ];
}

// ...

źródło: Wyłącz wykrywanie telefonu w PhoneGap-iOS .


Po przeczytaniu komentarza badger110 poszedłem zaimplementować kod awoodland. Więc jestem, w AppDelegate.m, kiedy przychodzi mi do głowy, że gdzieś to widziałem. Zaczynam się rozglądać, znajduję pole wyboru w pliku xib i myślę, że właśnie odkryłem coś magicznego. Wracam, aby opublikować to chwalebne odkrycie i stwierdzam, że komentarz badger110 był tam przez cały czas. TL DR: Najpierw przeczytaj komentarze, golonko.
Tina D.

8

Aby wyłączyć wykrywanie numeru telefonu na części strony, zawiń zmieniony tekst w tagu kotwicy za pomocą href = "#". Jeśli to zrobisz, mobilne Safari i UIWebView powinny pozostawić to w spokoju.

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

1
To właśnie skończyłem, ponieważ metatag nie działał. Jednak prawdopodobnie lepiej to zrobić, <a href="javascript:;">aby zapobiec skutkom ubocznym zmiany adresu URL.
JustJohn

To działa dla mnie w e-mailu HTML. Chciałem wyłączyć tylko jeden numer telefonu, nie wszystkie. Właśnie dodałem style = "text-decoration: none;" do znacznika kolorem odpowiadającym pozostałej części tekstu, możesz też zmienić styl kursora.
Simon Darby

6

Myślę, że znalazłem rozwiązanie: wstaw liczbę do <label>elementu. Nie próbowałem żadnych innych tagów, ale <div>pozostawiłem aktywne na ekranie głównym, nawet ztelephone=no atrybutem.

Wydaje się oczywiste z wcześniejszych komentarzy, że metatag działał, ale z jakiegoś powodu zepsuł się w późniejszych wersjach iOS, przynajmniej pod pewnymi warunkami. Korzystam z wersji 4.0.1.


Cześć Bob. Jeśli chcesz umieścić w przykładach kodu HTML, trzeba owinąć kod w backticks, <like this>. (Przepełnienie stosu używa języka formatowania o nazwie Markdown.) Odpowiednio zmodyfikuję twoją odpowiedź.
Paul D. Waite,

To ostatecznie nie zadziałało - gdy ponownie załadowałem aplikację, hiliting linków powrócił. Dodałem #znak z przodu numeru telefonu: zgodnie z dokumentem Apple „Dokument Apple URL Scheme Reference”: „W szczególności, jeśli adres URL zawiera znaki * lub #, aplikacja Telefon nie próbuje wybrać odpowiedniego numeru numer telefonu."
BobFromBris,

Powinieneś usunąć swoją odpowiedź, ponieważ ona nie działa. Jak sam przyznajesz w powyższym komentarzu.
mhenry1384

@ Bob Nice clean tip. Mieliśmy problemy z HTML w e-mailu. Zawijanie etykiety działało ładnie +1, dzięki
geedubb

6

Możesz także użyć <a>etykiety javascript: void(0)jako hrefwartości.

Przykład jak następuje:
<a href="javascript: void(0)">+44 456 77 89 87</a>


Pomogło mi to, gdy trzeba było nadal używać domyślnego stylu i działań iOS, ale ignorować określone elementy.
GreaterKing

4

Miałem ten sam problem, ale w aplikacji internetowej na iPada.

Niestety ani ...

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

ani ...

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

... pracował.

Ale oto trzy brzydkie hacki:

  • zastępując cyfrę „0” literą „O”
  • zastępując cyfrę „1” literą „l”
  • wstaw zakres bez znaczenia: np. 555.5<span>5</span>5.5555

W zależności od użytej czcionki pierwsze dwa są ledwo zauważalne. Ten ostatni oczywiście zawiera zbędny kod, ale jest niewidoczny dla użytkownika.

Kludgy z pewnością włamuje się i prawdopodobnie nie jest opłacalne, jeśli generujesz kod dynamicznie z danych lub jeśli nie możesz w ten sposób skazić swoich danych.

Ale wystarczy w mgnieniu oka.


2
„W zależności od używanej czcionki pierwsze dwa są ledwo zauważalne”, chyba że użytkownik ustawił system iOS na odczytanie treści . Wtedy byłoby to dość zauważalne.
Paul D. Waite

1
W przypadku ułatwień dostępu (takich jak wspomniany powyżej czytnik tekstu) lub jeśli użytkownik kopiuje / wkleja do aplikacji telefonu, to po prostu psuje rzeczy. Ogólnie rzecz biorąc, jeśli pająk z Yelp, Google itp. Indeksuje firmę i wyciąga niewłaściwy numer telefonu, to nie jest dobre.
Jonasz

4

Miałem numer ABN (Australian Business Number), który iPad Safari nalegał, aby zmienić go w link do numeru telefonu. Żadna z sugestii nie pomogła. Moim rozwiązaniem było umieszczenie znaczników img między liczbami.

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

Klasa istnieje tylko w celu udokumentowania, do czego służą tagi img.

Działa na iPad 1 (4.3.1) i iPad 2 (4.3.3).


3
Niestety w przeglądarce Internet Explorer dostaję te zepsute ikony obrazów. Dodawanie width="0" height="0"pomaga, ale nadal wyświetlany jest pojedynczy piksel.
Geert

1
Nie potrzebujesz obrazów, po prostu wstaw dowolny HTML wewnątrz numeru: <p> Nie telefon: 112 <span> 34 </span> 56 </p>
Radek Pech

@Geert, ustaw line-heighti wyzeruj font-size.
HelpNeeder

4

Moje doświadczenie jest takie samo, jak niektóre inne wspomniane. Metatag ...

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

... działa, gdy witryna działa w Mobile Safari (tj. z Chrome), ale przestaje działać, gdy działa jako aplikacja internetowa (tzn. jest zapisywana na ekranie głównym i działa bez Chrome).

Moim niezbyt idealnym rozwiązaniem jest wstawienie wartości do pól wejściowych ...

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

Jest to mniej niż idealne, ponieważ pomimo ustawienia granicy na brak, iOS renderuje szary piksel ponad polem. Ale to lepsze niż postrzeganie numeru jako linku.


3

Sam to przetestowałem i stwierdziłem, że działa, choć z pewnością nie jest to eleganckie rozwiązanie. Wstawienie pustego zakresu do numeru telefonu zapobiegnie przekształceniu go przez detektory danych w łącze.

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

1
Jest to również poprawka, z której skorzystałem i działa bardzo dobrze i jest dość prosta.
Holger

2
To nie jest dobra odpowiedź, ponieważ generujesz umyślny zły kod HTML.
stephanfriedrich

2

<meta name = "format-detection" content = "telephone=no"> nie działa w przypadku wiadomości e-mail: jeśli przygotowywany kod HTML dotyczy wiadomości e-mail, metatag zostanie zignorowany.

Jeśli celujesz w e-maile, oto jeszcze jedno brzydkie, ale działa rozwiązanie:

Przykład kodu HTML, który chcesz uniknąć łączenia lub automatycznego formatowania:

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

I CSS, który sprawi, że magia się wydarzy:

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

Wada: może być potrzebne zapytanie o media dla każdej kombinacji pionowej / poziomej na iPadzie / iPhonie



1

Ten sam problem w aplikacji Sencha Touch rozwiązany za pomocą meta tag ( <meta name="format-detection" content="telephone=no">) w index.html aplikacji.


1

Sztuczka, której używam, która działa nie tylko na Mobile Safari, polega na użyciu kodów ucieczki HTML i niewielkiej narzuty w numerze telefonu. Utrudnia to przeglądarce „identyfikację” numeru telefonu, tj

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

1

Ja też mam ten problem: Safari i inne przeglądarki mobilne przekształcają identyfikatory VAT w numery telefonów. Chcę więc czystej metody, aby uniknąć tego na pojedynczym elemencie, a nie na całej stronie (lub witrynie).
Dzielę się możliwym rozwiązaniem, które znalazłem, jest nieoptymalne, ale nadal jest całkiem realne: umieszczam wewnątrz liczby, której nie chcę stać się tel:linkiem, &#8288;encja HTML, która jest niewidoczną postacią łączącą słowa . Próbowałem pozostać bardziej semantyczny (cóż, przynajmniej w pewnym sensie), umieszczając ten znak w jakimś sensownym miejscu, np. W przypadku identyfikatora VAT wybrałem umieszczanie go między różnymi grupami cyfr zgodnie z jego formatem, więc dla włoskiego podatku VAT I napisał: 0613605&#8288;048&#8288;8który renderuje w 0613605⁠048⁠8 i nie jest przekształcany w numer telefonu.


1

Inną opcją jest zastąpienie łączników w numerze telefonu znakiem (U + 2011 „Unicode Non-Breaking Hyphen”)


1

Przez chwilę byłem bardzo zdezorientowany, ale w końcu to rozgryzłem. Dokonaliśmy aktualizacji naszej witryny i niektóre numery zostały przekonwertowane na link, a niektóre nie. Okazuje się, że liczby nie zostaną przekonwertowane na link, jeśli znajdują się w <polu zestawu>. Oczywiście nie jest to właściwe rozwiązanie w większości przypadków, ale w niektórych przypadkach będzie to właściwe.


0

Ta odpowiedź przebija wszystko w dniach 6-13-2012:

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

Zmień kolor na dowolny, dopasowujący się do tekstu, dekoracja tekstu usuwa podkreślenie, zdarzenia wskaźnika uniemożliwiają oglądanie go jak łącza w przeglądarce (wskaźnik nie zmienia się w dłoń)

Jest to idealne rozwiązanie do wiadomości e-mail HTML na iOS i przeglądarce.


1
Wydaje mi się, że to wyraźnie określa kolor. Innymi słowy, będzie szary bez względu na wszystko.
benzado

„Zdarzenia wskaźnikowe uniemożliwiają oglądanie go jak łącza w przeglądarce” - na pointer-eventspewno w przeglądarce, która obsługuje . Jeśli użytkownik przegląda wiadomości e-mail w formacie HTML w IE 10, nie ma to nic dobrego .
Paul D. Waite

Pytanie dotyczy ukrycia wykrywania numerów telefonów, a nie adresów mailowych.
jww

0

Dlaczego chcesz usunąć linkowanie, dzięki temu masz bardzo przyjazną dla użytkownika opcję.

Jeśli chcesz po prostu usunąć automatyczną edycję, ale nadal działasz, po prostu dodaj to do swojego CSS ...

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

5
cóż, nie mogę powiedzieć o oryginalnym plakacie, ale w moim przypadku Safari zgaduje telefony, które w rzeczywistości nie są numerami telefonów, są to dane finansowe
Irae Carvalho

1
Pytanie dotyczy wykrycia linków na numerach telefonów, a nie ich edycji.
jww

W niektórych przypadkach możesz mieć numer telefonu na stronie internetowej, na którym musisz wykonać inną operację niż nawiązanie połączenia telefonicznego, np. Wyświetlenie opcji edycji lub możliwość kliknięcia i przeciągnięcia go w inne miejsce.
Nosajimiki,

nie chce, aby adresy IP były połączone jako numery telefonów
jahller

0

Podziel liczbę na osobne bloki tekstu

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

1
Możesz wspomnieć, że jest to obejście.
Daan

-16

Innym rozwiązaniem byłoby użycie obrazu numeru IP


4
Myślę, że to nie taki boski pomysł. Usuń swoją odpowiedź. Ponieważ nie można kopiować / wklejać tekstu obrazów, nie jest łatwy w obsłudze (jeśli zmienisz treść lub styl czcionki), a także nie jest pozbawiony barier.
stephanfriedrich

rozwiązanie może być gorsze niż problem, jak powiedział @stephanfriedrich, nie będzie to przydatne ani użyteczne
kaosmos

W ogóle nieprzydatne.
Luca Antonelli,
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.