Como desativar a vinculação de número de telefone no Mobile Safari?

363

O Safari no iPhone cria automaticamente links para cadeias de dígitos que aparecem nos números de telefone. Estou escrevendo uma página da Web contendo um endereço IP e o Safari está transformando isso em um link de número de telefone. É possível desativar esse comportamento para uma página inteira ou um elemento em uma página?

benzado
fonte

Respostas:

714

Parece ser a coisa certa a fazer, de acordo com a Referência HTML do Safari :

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

Se você desabilitar isso, mas ainda desejar links telefônicos, ainda poderá usar o esquema de URI "tel".

Aqui está a página relevante na Biblioteca do desenvolvedor da Apple.

Lewisinski
fonte
11
Isso simplesmente não funciona. Não para aplicativos da Web no iOS 4.3.1 de qualquer maneira.
Mshry1384 18/04
5
4.2.1 no iPhone funciona; developer.apple.com/library/ios/#featuredarticles/…
Mark Brackett
2
Só queria observar que isso também funciona para versões recentes, como a 5.1.1, na qual estou agora.
Dave Stein
4
Isso pode ser aplicado caso a caso? Por exemplo, 1 sequência de números em uma página que eu não quero ser interpretada como um número de telefone, mas mantenha o comportamento de outras 6 pessoas em uma página que eu quero que seja automaticamente interpretada como um número de telefone?
Jspdesign
3
Isso funciona perfeitamente bem no IOS 12 em 2019! 👍🏻
Matt Komarnicki
38

Para desativar a aparência de análise do telefone para elementos específicos, este CSS parece fazer o truque:

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

A primeira regra desativa o clique, a segunda cuida do estilo.

Florian Grell
fonte
5
Ótima solução onde você deseja restringir o estilo / formatação em um local muito específico.
Mikevoermans
36

Eu uso um marceneiro de largura zero &zwj;

Basta colocar isso em algum lugar do número de telefone e funciona para mim. Testado no BrowserStack (e Litmus para e-mails).

stickyuser
fonte
11
Isso funciona para mim. Acabei de adicioná-lo antes do primeiro número.
Vinboxx #
11
A melhor solução!
precisa
Criei uma assinatura de email em HTML e essa foi a única solução que ajudou a impedir que o email do iOS 10 detectasse falsamente um número (não telefone) como um número de telefone.
Nick
11
Solução pura. Funcionou bem no iPhone 6S (+) / iOS 9.
Ain Tohvri 9/17
11
Esta é a única solução viável se você estiver solicitando ao Mobile Safari para carregar um arquivo XML que usa uma diretiva <? Xml-stylesheet> para gerar a página HTML. O Mobile Safari converte qualquer número longo no XML original em um link "tel:", mesmo que a fonte não seja HTML (!).
Mark Reinhold
33

Eu estava tendo o mesmo problema. Encontrei uma propriedade no UIWebView que permite desativar os detectores de dados.

self.webView.dataDetectorTypes = UIDataDetectorTypeNone;
catshow
fonte
Por fim, uma solução que funcionou para mim. Obviamente, isso funcionará apenas com pessoas que escrevem seu próprio aplicativo objetivo-c usando o UIWebView, e não usando o aplicativo Safari. Obrigado!!
precisa saber é o seguinte
29

Adicione isso, acho que é o que você está procurando:

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

Solução para Webview!

Para aplicativos PhoneGap-iPhone / PhoneGap-iOS, você pode desativar a detecção de número de telefone adicionando o seguinte ao delegado de aplicativo do seu projeto:

// ...

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

    return [ super webViewDidStartLoad:theWebView ];
}

// ...

fonte: Desativar detecção de telefone no PhoneGap-iOS .

TRiG
fonte
Fui para implementar o código do awoodland antes de ler o comentário badger110. Então, aqui estou eu, no AppDelegate.m, quando me ocorre que eu já vi isso em algum lugar. Começo a olhar em volta, encontro a caixa de seleção no arquivo xib e acho que acabei de descobrir algo mágico. Volto a postar essa descoberta gloriosa e acho que o comentário de badger110 estava lá o tempo todo. TL DR: Leia os comentários primeiro, ya knuckle head.
Tina D.
8

Para desativar a detecção de número de telefone em parte de uma página, coloque o texto afetado em uma marca de âncora com href = "#". Se você fizer isso, o Safari móvel e o UIWebView devem deixá-lo em paz.

<a href="#"> 1234567 </a>
yodaisgreen
fonte
11
Foi isso que acabei fazendo, pois a metatag não funcionou. No entanto, provavelmente é melhor fazer isso <a href="javascript:;">para evitar efeitos colaterais de uma alteração de URL.
JustJohn
Isso funciona para mim no email em HTML. Eu só queria desativar um número de telefone, não todos. Acabei de adicionar o style = "text-decoration: none;" para a tag com a cor para corresponder ao restante do texto e você também pode alterar o estilo do cursor.
Simon Darby
6

Acho que encontrei uma solução: coloque o número dentro de um <label>elemento. Não tentei outras tags, mas a <div>deixei ativa na tela inicial, mesmo com otelephone=no atributo

Parece óbvio, nos comentários anteriores, que a metatag funcionou, mas por algum motivo foi interrompida nas versões posteriores do iOS, pelo menos sob algumas condições. Estou executando o 4.0.1.

BobFromBris
fonte
Oi Bob. Se você deseja inserir exemplos de código HTML, é necessário agrupar o código em backticks <like this>,. (O estouro de pilha usa uma linguagem de formatação chamada Markdown.) Editarei sua resposta de acordo.
Paul D. Waite
No final, isso não funcionou - quando recarreguei o aplicativo, o link hiliting estava de volta. Tentei adicionar um #caractere à frente do número de telefone: de acordo com o documento Apple "Apple URL Scheme Reference": "Especificamente, se um URL contiver os caracteres * ou #, o aplicativo Phone não tentará discar o número correspondente. número de telefone."
BobFromBris
Você deve remover sua resposta, pois ela não funciona. Como você mesmo reconhece no comentário acima.
Mshry1384 18/04
@Bob Dica limpa e agradável. Tivemos problemas com o HTML em um email. Embrulhar em um rótulo funcionou muito bem +1, graças
geedubb
6

Você também pode usar o <a>rótulo com javascript: void(0)como hrefvalor.

Exemplo da seguinte maneira:
<a href="javascript: void(0)">+44 456 77 89 87</a>

diazwatson
fonte
Isso me ajudou quando necessário ainda usar o estilo e as ações padrão do iOS, mas ignorando elementos específicos.
precisa saber é o seguinte
4

Eu tive o mesmo problema, mas em um aplicativo da web para iPad.

Infelizmente, nem ...

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

nem ...

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

... funcionou.

Mas, aqui estão três hacks feios:

  • substituindo o número "0" pela letra "O"
  • substituindo o número "1" pela letra "l"
  • insira uma extensão sem sentido: por exemplo, 555.5<span>5</span>5.5555

Dependendo da fonte usada, os dois primeiros são quase imperceptíveis. Obviamente, o último envolve código supérfluo, mas é invisível para o usuário.

O Kludgy hacks, com certeza, e provavelmente não é viável se você estiver gerando seu código dinamicamente a partir de dados ou se não puder poluir seus dados dessa maneira.

Mas, suficiente em uma pitada.

mattstuehler
fonte
2
“Dependendo da fonte usada, os dois primeiros são quase imperceptíveis” A menos que o usuário tenha configurado o iOS para ler o conteúdo para eles . Então seria bem perceptível.
Paul D. Waite
11
Para acessibilidade (como o leitor de texto mencionado acima), ou se o usuário copiar / colar no aplicativo de telefone, isso simplesmente quebra as coisas. Além disso, em geral, se uma aranha do Yelp, Google ou algo semelhante estiver indexando uma empresa e digitar o número de telefone errado, isso não será bom.
Jonah
4

Eu tinha um ABN (Australian Business Number) que o iPad Safari insistia em transformar em um link de número de telefone. Nenhuma das sugestões ajudou. Minha solução foi colocar tags img entre os números.

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

A classe existe apenas para documentar para que servem as tags img.

Funciona no iPad 1 (4.3.1) e iPad 2 (4.3.3).

mhenry1384
fonte
3
Infelizmente, no Internet Explorer, recebo os ícones de imagem quebrados. A adição de width="0" height="0"ajuda, mas ainda um único pixel é exibido.
Geert 29/07
11
Você não precisa imagens, basta colocar qualquer HTML dentro do número: <p> Não é um telefone: 112 <span> 34 </ span> 56 </ p>
Radek Pech
@ Geert, defina line-heighte font-sizepara zero.
precisa saber é o seguinte
4

Minha experiência é a mesma que algumas outras mencionadas. A meta tag ...

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

... funciona quando o site está sendo executado no Mobile Safari (por exemplo, com chrome), mas para de funcionar quando executado como um aplicativo da web (por exemplo, é salvo na tela inicial e é executado sem o chrome).

Minha solução não-ideal é inserir os valores nos campos de entrada ...

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

É menos do que o ideal porque, apesar de a borda estar definida como nenhuma, o iOS renderiza uma barra cinza com vários pixels acima do campo. Mas é melhor do que ver o número como um link.

Alan M.
fonte
3

Eu mesmo testei e descobri que funciona, embora certamente não seja uma solução elegante. Inserir um espaço vazio no número de telefone impedirá que os detectores de dados o transformem em um link.

(604) 555<span></span> -4321
Jay
fonte
11
Essa também foi a correção que acabei usando e funcionou muito bem e é bastante simples.
Holger
2
Esta não é uma boa resposta, porque você gera HTML incorreto intencional.
stephanfriedrich
2

<meta name = "format-detection" content = "telephone=no"> não funciona para emails: se o HTML que você está preparando for para um email, o metatag será ignorado.

Se o que você está alvejando são e-mails, aqui está mais uma solução feia, mas funciona para você:

Exemplo de algum HTML que você deseja evitar ser vinculado ou formatado automaticamente:

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

E o CSS que fará a mágica acontecer:

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

A desvantagem: você pode precisar de uma consulta de mídia para cada um dos combos retrato / paisagem do ipad / iphone

cabrera
fonte
1

Você pode tentar codificá-los como entidades HTML:

&#48; = 0
&#57; = 9
Diodous - James MacFarlane
fonte
1

O mesmo problema no aplicativo Sencha Touch resolvido com a metatag ( <meta name="format-detection" content="telephone=no">) em index.html do aplicativo.

alguém
fonte
1

Um truque que uso mais do que apenas o Mobile Safari é usar códigos de escape HTML e uma pequena marcação no número de telefone. Isso torna mais difícil para o navegador "identificar" um número de telefone, ou seja,

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

Também tenho esse problema: o Safari e outros navegadores móveis transformam os IDs de IVA em números de telefone. Então, eu quero um método limpo para evitá-lo em um único elemento, não na página inteira (ou no site).
Estou compartilhando uma possível solução que encontrei, que é subótima, mas ainda é bastante viável: coloquei dentro do número que não quero me tornar um tel:link, a &#8288;entidade HTML que é o caractere invisível do Word-Joiner . Tentei me manter mais semântico (bem, pelo menos uma espécie de) colocando esse caracter em algum sentido, por exemplo, para o ID do IVA, escolhi colocá-lo entre os diferentes grupos de dígitos de acordo com seu formato , para um IVA italiano I escreveu: 0613605&#8288;048&#8288;8que é processado em 0613605⁠048⁠8 e não é transformado em um número de telefone.

kaosmos
fonte
1

Outra opção é substituir os hífens no seu número de telefone pelo caractere (U + 2011 'Hífen sem quebra de código Unicode')

Daniel
fonte
1

Fiquei realmente confuso com isso por um tempo, mas finalmente descobri. Fizemos atualizações em nosso site e alguns números foram convertidos em um link e outros não. Acontece que os números não serão convertidos em um link se estiverem em um <fieldset>. Obviamente, não é a solução certa para a maioria das circunstâncias, mas em algumas será a correta.

Oliver P
fonte
0

Esta resposta supera tudo em 13/06/2012:

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

Altere a cor para o que corresponder ao seu texto, a decoração do texto removerá o sublinhado, os eventos do ponteiro impedirão que ele seja visto como um link em um navegador (o ponteiro não muda para uma mão)

Isso é perfeito para emails em HTML no ios e no navegador.

Vincent Tobiaz
fonte
11
Parece-me que isso define a cor explicitamente. Em outras palavras, será cinza, não importa o quê.
benzado
“Eventos de ponteiro impedem que seja exibido como um link em um navegador” - em um navegador compatível pointer-events, com certeza. Se o usuário estiver visualizando seus e-mails HTML no IE 10, no entanto, não é bom .
Paul D. Waite
A questão é suprimir a detecção de números de telefone, não endereços de correspondência.
JWW
0

Por que você deseja remover o link, torna muito fácil ter a opção.

Se você simplesmente deseja remover a edição automática, mas mantenha o link funcionando, basta adicioná-lo ao seu CSS ...

a[href^=tel] {
 color: inherit;
 text-decoration:inherit;
}
Marc
fonte
5
bem, eu não posso dizer sobre o cartaz original, mas no meu caso Safari é adivinhar telefones que não são, na verdade, números de telefone, eles são dados financeiros
Irae Carvalho
11
A questão é sobre a detecção de links em números de telefone, não em editá-los.
JWW
Em alguns casos, você pode ter um número de telefone em um site em que precisa realizar alguma outra operação além de fazer uma ligação, como abrir uma opção para editá-la ou a capacidade de clicar e arrastar para outro lugar.
Nosajimiki
ele não quer ter ip endereços ligados como números de telefone
jahller
0

Divida o número em blocos de texto separados

301 <div style="display:inline-block">441</div> 3909
Kareem
fonte
11
Você pode mencionar que esta é uma solução alternativa.
Daan
-16

Outra solução seria usar uma imagem do número IP

Chris Copland
fonte
4
Eu acho que essa não é uma idéia divina. Por favor, apague sua resposta. Porque você não pode copiar / colar um Texto da imagem, não é fácil fazer manutenção (se você alterar o conteúdo ou o estilo da fonte) e também não é sem barreiras.
stephanfriedrich
a solução poderia ser pior do que o Problema, como disse @stephanfriedrich isso não vai ser útil ou utilizáveis
kaosmos
Não é de todo útil.
Luca Antonelli