Как отключить привязку номера телефона в Mobile Safari?

363

Safari на iPhone автоматически создает ссылки на строки цифр, которые появляются на телефонных номерах. Я пишу веб-страницу с IP-адресом, и Safari превращает его в ссылку на номер телефона. Можно ли отключить это поведение для всей страницы или элемента на странице?

benzado
источник
См. Также stackoverflow.com/questions/3649702/…
jrummell

Ответы:

714

По мнению Safari HTML Reference, это правильно .

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

Если вы отключите это, но по-прежнему хотите телефонную связь, вы все равно можете использовать схему "tel" URI.

Вот соответствующая страница в библиотеке разработчика Apple.

Левински
источник
1
Это просто не работает. Во всяком случае, не для веб-приложений на iOS 4.3.1.
mhenry1384
5
4.2.1 на айфоне работает; developer.apple.com/library/ios/#featuredarticles/…
Марк Брэкетт
2
Просто хотел отметить, что это также работает для последних версий, таких как 5.1.1, на которой я сейчас работаю.
Дейв Стейн
4
Может ли это применяться на индивидуальной основе? Например, 1 строку номера на странице, которую я не хочу интерпретировать как номер телефона, но сохраняю ли поведение 6 других на странице, которую я хочу автоматически интерпретировать как номер телефона?
jpostdesign
3
Это прекрасно работает под IOS 12 в 2019 году! Mat
Мэтт Комарницки
38

Чтобы отключить внешний вид разбора телефона для определенных элементов, этот CSS, кажется, делает свое дело:

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

Первое правило отключает щелчок, второе заботится о стилизации.

Флориан Грелль
источник
5
Отличное решение, где вы хотите ограничить стилизацию / форматирование в очень конкретном месте.
mikevoermans
36

Я использую столяр нулевой ширины &zwj;

Просто поместите это где-нибудь в номер телефона, и это работает для меня. Протестировано в BrowserStack (и Лакмус для электронной почты).

stickyuser
источник
1
Это работает для меня. Я просто добавляю его перед первым номером.
vinboxx
1
Лучшее решение!
El cero
Я создал подпись электронной почты в формате HTML, и это было единственное решение, которое помогло предотвратить неправильное обнаружение почтой iOS 10 номера (не телефона) в качестве номера телефона.
Ник
1
Чистое решение.
Отлично
1
Это единственное работоспособное решение, если вы просите Mobile Safari загрузить XML-файл, который использует директиву <? Xml-stylesheet> для генерации HTML-страницы. Mobile Safari преобразует любое длинное число в исходном XML-файле в ссылку «tel:», хотя источником является не HTML (!).
Марк Рейнхольд
33

У меня была такая же проблема. Я нашел свойство в UIWebView, которое позволяет отключать детекторы данных.

self.webView.dataDetectorTypes = UIDataDetectorTypeNone;
CATSHOW
источник
Наконец, решение, которое сработало для меня. Конечно, это будет работать только с людьми, пишущими свое собственное приложение target-c, использующее UIWebView, но не использующее приложение Safari. Спасибо!!
iandotkelly
29

Добавьте это, я думаю, это то, что вы ищете:

<meta name = "format-detection" content = "telephone=no">
цыпленок
источник
10

Решение для Webview!

Для приложений PhoneGap-iPhone / PhoneGap-iOS вы можете отключить определение номера телефона, добавив следующее к делегату приложения вашего проекта:

// ...

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

    return [ super webViewDidStartLoad:theWebView ];
}

// ...

источник: отключить обнаружение телефона в PhoneGap-iOS .

наряжать
источник
Я решил реализовать код awoodland, прежде чем я прочитал комментарий badger110. И вот я в AppDelegate.m, когда мне приходит в голову, что я где-то видел это. Я начинаю осматриваться, нахожу флажок в xib-файле и думаю, что обнаружил что-то волшебное. Я возвращаюсь, чтобы опубликовать это великолепное открытие, и обнаружил, что комментарий badger110 был там все время. TL DR: Прочитайте комментарии в первую очередь.
Тина Д.
8

Чтобы отключить определение номера телефона на части страницы, оберните затронутый текст в тег привязки с помощью href = "#". Если вы сделаете это, мобильный Safari и UIWebView должны оставить его в покое.

<a href="#"> 1234567 </a>
yodaisgreen
источник
1
Это то, что я в итоге сделал, так как metaтег не работал. Тем не менее, это, вероятно, лучше сделать, <a href="javascript:;">чтобы предотвратить побочные эффекты от изменения URL-адреса.
JustJohn
Это работает для меня в электронной почте HTML. Я хотел отключить только один номер телефона, а не все. Я просто добавил стиль = "text-украшение: нет;" к тегу с цветом, чтобы соответствовать остальной части текста, и вы можете изменить стиль курсора тоже.
Саймон Дарби
6

Думаю, я нашел решение: поместите число внутри <label>элемента. Не пробовал другие теги, но <div>оставил его активным на главном экране, даже с telephone=noатрибутом.

Из предыдущих комментариев очевидно, что метатег работал, но по какой-то причине сломался в более поздних версиях iOS, по крайней мере, при некоторых условиях. Я бегу 4.0.1.

BobFromBris
источник
Привет боб. Если вы хотите поместить в примерах HTML кода, вы должны обернуть код в обратных кавычках, <like this>. (Переполнение стека использует язык форматирования Markdown.) Я отредактирую ваш ответ соответственно.
Пол Д. Уэйт
В конечном итоге это не сработало - когда я перезагружал приложение, ссылка была восстановлена. Я прибег к добавлению #символа в начале телефонного номера: согласно документу Apple «Справочник по схеме Apple URL»: «В частности, если URL-адрес содержит символы * или #, приложение« Телефон »не пытается набрать соответствующий номер. номер телефона."
BobFromBris
Вы должны удалить свой ответ, так как он не работает. Как вы сами признаете в вышеприведенном комментарии.
mhenry1384
@Bob Хороший чистый совет. У нас были проблемы с HTML в электронном письме. Упаковка в ярлык сработала +1, спасибо
geedubb
6

Вы также можете использовать <a>этикетку с в javascript: void(0)качестве hrefзначения.

Пример как следует:
<a href="javascript: void(0)">+44 456 77 89 87</a>

diazwatson
источник
Это помогло мне, когда мне нужно было использовать стили и действия iOS по умолчанию, но игнорировать определенные элементы.
GreatKing
4

У меня была такая же проблема, но в веб-приложении для iPad.

К сожалению, ни ...

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

ни ...

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

... работал.

Но вот три уродливых хака:

  • заменяя число «0» на букву «O»
  • заменив число «1» на букву «l»
  • вставить бессмысленный интервал: например, 555.5<span>5</span>5.5555

В зависимости от используемого шрифта первые два едва заметны. Последний, очевидно, включает в себя лишний код, но невидим для пользователя.

Kludgy наверняка взломает и, вероятно, не будет жизнеспособным, если вы генерируете свой код динамически из данных, или если вы не можете таким образом загрязнять свои данные.

Но достаточно в крайнем случае.

mattstuehler
источник
2
«В зависимости от шрифта, который вы используете, первые два едва заметны», если пользователь не настроил iOS для чтения содержимого . Тогда это было бы довольно заметно.
Пол Д. Уэйт
1
Для доступности (например, для чтения текста, упомянутой выше), или если пользователь копирует / вставляет в приложение телефона, это просто ломает вещи. Кроме того, в целом, если паук из Yelp, Google или тому подобного индексирует бизнес и тянет неправильный номер телефона, это бесполезно.
Иона
4

У меня был ABN (австралийский бизнес-номер), который iPad Safari настоял на том, чтобы превратить его в номер телефона. Ни одно из предложений не помогло. Моим решением было поместить теги img между номерами.

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

Класс существует только для документирования, для чего предназначены теги img.

Работает на iPad 1 (4.3.1) и iPad 2 (4.3.3).

mhenry1384
источник
3
К сожалению, в Internet Explorer я получаю эти значки с разбитым изображением. Добавление width="0" height="0"помогает, но по-прежнему отображается один пиксель.
Герт
1
Вам не нужны изображения, просто поместите любой HTML-код в число: <p> Не телефон: 112 <span> 34 </ span> 56 </ p>
Радек Печ
@Geert, установите line-heightи font-sizeна ноль.
HelpNeeder
4

Мой опыт такой же, как некоторые другие упомянутые. Метатег ...

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

... работает, когда веб-сайт работает в Mobile Safari (т. е. с Chrome), но перестает работать при запуске в качестве веб-приложения (т. е. сохраняется на главном экране и работает без Chrome).

Мое неидеальное решение - вставить значения в поля ввода ...

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

Это менее чем идеально, потому что, несмотря на то, что для границы установлено значение none, iOS отображает многопиксельную серую полосу над полем. Но это лучше, чем видеть номер как ссылку.

Алан М.
источник
3

Я сам проверил это и обнаружил, что это работает, хотя это, конечно, не элегантное решение. Вставка пустого промежутка в номер телефона не позволит детекторам данных превратить его в ссылку.

(604) 555<span></span> -4321
сойка
источник
1
Это также исправление, которое я в итоге использовал, и оно работает очень хорошо и довольно просто.
Хольгер
2
Это не хороший ответ, потому что вы генерируете преднамеренно плохой HTML.
Стефанфридрих
2

<meta name = "format-detection" content = "telephone=no"> не работает для электронных писем: если HTML-код, который вы готовите, предназначен для электронной почты, метатег будет игнорироваться.

Если вы нацеливаетесь на электронные письма, вот еще одно уродливое, но работающее решение для вас:

Пример некоторого HTML-кода, который вы хотите избежать ссылки или автоматического форматирования:

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

И CSS, который сделает волшебство возможным:

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

Недостаток: вам может понадобиться медиа-запрос для каждой из комбинаций ipad / iphone Portrait / Landscape

Cabrera
источник
1

Вы можете попробовать закодировать их как HTML-сущности:

&#48; = 0
&#57; = 9
Диодей - Джеймс Макфарлейн
источник
1

Та же проблема в приложении Sencha Touch решена с помощью meta tag ( <meta name="format-detection" content="telephone=no">) в index.html приложения.

кто-нибудь другой
источник
1

Уловка, которую я использую, которая работает не только с Mobile Safari, заключается в использовании escape-кодов HTML и небольшой разметки в номере телефона. Это усложняет браузеру «идентификацию» номера телефона, т.е.

Phone: 1-8&#48;&#48;<span>-</span>62&#48;<span>-</span>38&#48;3
Фил ЛаНаса
источник
1

У меня тоже есть эта проблема: Safari и другие мобильные браузеры преобразуют идентификаторы НДС в номера телефонов. Поэтому я хочу чистый метод, чтобы избежать этого на одном элементе, а не на всей странице (или сайте).
Я делюсь возможным решением, которое я нашел, оно неоптимально, но все же оно довольно жизнеспособно: я помещаю в число, которое не хочу становиться tel:ссылкой, &#8288;объект HTML, который является невидимым символом Word-Joiner . Я пытался оставаться более семантическим (ну, по крайней мере, своего рода), помещая этот символ в какое-то значимое место, например, для идентификатора НДС, который я выбрал, чтобы поместить его между различными группами цифр в соответствии с его форматом, поэтому для итальянского НДС I wrote: 0613605&#8288;048&#8288;8который рендерит в 0613605⁠048⁠8 и не преобразуется в телефонный номер.

kaosmos
источник
1

Другой вариант - заменить дефисы в номере телефона символом (U + 2011 «Unicode Non-Breaking Hyphen»)

Даниил
источник
1

Я был действительно смущен этим некоторое время, но наконец понял это. Мы сделали обновления для нашего сайта, и некоторые цифры были преобразованы в ссылку, а некоторые нет. Оказывается, что числа не будут преобразованы в ссылку, если они находятся в <fieldset>. Очевидно, что это не правильное решение для большинства обстоятельств, но в некоторых оно будет правильным.

Оливер П
источник
0

Этот ответ превосходит все по состоянию на 6-13-2012:

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

Измените цвет на тот, который соответствует вашему тексту, текстовое оформление удаляет подчеркивание, события указателя мешают его просматривать как ссылку в браузере (указатель не меняется на руку)

Это идеально подходит для электронных писем в формате HTML на ios и в браузере.

Винсент Тобиаз
источник
1
Похоже, что это устанавливает цвет явно. Другими словами, он будет серым, несмотря ни на что.
Бензадо
«События указателя не позволяют просматривать его как ссылку в браузере» - в браузере, который поддерживает pointer-events, конечно. Если пользователь просматривает ваши электронные письма в формате HTML в IE 10, это не поможет .
Пол Д. Уэйт
Речь идет о подавлении обнаружения телефонных номеров, а не почтовых адресов.
jww
0

Почему вы хотите удалить ссылку, это делает его очень удобным для пользователя.

Если вы просто хотите удалить авторедактирование, но сохранить ссылку работающей, просто добавьте это в свой CSS ...

a[href^=tel] {
 color: inherit;
 text-decoration:inherit;
}
Марк
источник
5
ну, я не могу сказать об оригинальном постере, но в моем случае Safari угадывает телефоны, которые на самом деле не являются телефонными номерами, а являются финансовыми данными
Ира Карвалью
1
Речь идет об обнаружении ссылок на телефонных номерах, а не об их редактировании.
jww
В некоторых случаях у вас может быть номер телефона на веб-сайте, где вам нужно выполнить какую-то другую операцию, а не сделать телефонный звонок, например, выбрать опцию для редактирования, или возможность щелкнуть и перетащить его в другое место.
Носадзимики
он не хочет, чтобы IP-адреса были связаны как телефонные номера
jahller
0

Разбейте число на отдельные блоки текста

301 <div style="display:inline-block">441</div> 3909
Карима
источник
1
Вы можете упомянуть, что это обходной путь.
Даан
-16

Другое решение было бы использовать изображение номера IP

Крис Копланд
источник
4
Я думаю, это не такая божественная идея. Пожалуйста, удалите свой ответ. Потому что вы не можете копировать / вставлять текст с изображениями, его нелегко обслуживать (если вы меняете содержимое или стиль шрифта), а также он не беспрепятственный.
Стефан Фридрих
решение может быть худшим, чем проблема, как говорит @stephanfriedrich, это не будет полезным или пригодным для использования
kaosmos
Не полезно вообще.
Лука Антонелли