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

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

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

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

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

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

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

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

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

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

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

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

self.webView.dataDetectorTypes = UIDataDetectorTypeNone;

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

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

Решение для 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 .

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

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

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

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

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

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

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

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

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

ни ...

0 = 0
9 = 9

... работал.

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

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

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

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

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

У меня был 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).

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

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

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

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

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

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

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

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

<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

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

0 = 0
9 = 9

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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