Как отключить ссылку на номер телефона на рабочем столе?

Я просто занимался этой проблемой, искал решения и нашел эту тему (и несколько других). Я должен признаться, что я не мог заставить ни один из них работать должным образом. Я уверен, что делал что-то не так, НО я нашел чит.

Как указывали другие, изменение CSS, чтобы скрыть видимую индикацию ссылки (color, text-decoration, cursor), является первым и самым простым шагом. Обман состоит в том, чтобы определить title для ссылки tel.

<p>Just call us at <a class="cssclassname" href="tel:18005555555" 
title="CLICK TO DIAL - Mobile Only">(800) 555-5555</a>.</p>

При этом не только маскируется видимый индикатор ссылки (через CSS — см. примеры других), но и если кто-то наводит курсор на ссылку, всплывает заголовок и говорится: «НАЖМИТЕ ДЛЯ НАБОР — Только для мобильных устройств». Таким образом, не только улучшится пользовательский опыт, но и ваш клиент не обвинит вас в неработающей ссылке!

Не могли бы вы просто ввести код дважды? то есть...

<div class="desktoptel">0800 000 000</div>
<div class="mobiletel"><a href="tel:0800-000-000">0800-000-000</div>

Затем просто «отобразить: нет;» на соответствующий класс в зависимости от размеров вашего браузера?

Недавно у меня была такая же проблема. Эта проблема во всем stackoverflow и везде. Как скрыть префикс 'tel:' и предотвратить его появление в обычных браузерах. Нет хорошего единственного ответа.

В итоге я сделал это так:

сначала я использую метаязык для фильтрации браузера по сравнению с мобильным (например, php/coldfusion/perl) на основе строки пользовательского агента:

regular exp match for "/Android|webOS|iPhone|iPad|BlackBerry/i",CGI.HTTP_USER_AGENT

это дает мне условие if/else для настольного браузера и телефона.

Далее мой тег href выглядит так: <a class="tel" id='tel:8005551212' href=''>800-555-1212</a>

Используйте CSS для стилизации класса .tel в таблице стилей рабочего стола, чтобы он не выглядел как ссылка на настольные браузеры. номер телефона все еще можно щелкнуть, но это не очевидно, и он ничего не сделает:

/* this is in default stylesheet, styles.css: */
.tel{
    text-decoration:none;
    color: #000;
    cursor:default;
}
/* it should be re-styled in mobile css: */
.tel{
    text-decoration: underline;
    color: #0000CC;
    cursor:auto;
}

Наконец, я делаю небольшой jquery для мобильных ссылок. jQuery получает идентификатор из класса a.tel и вставляет его в свойство href, что делает его доступным для пользователей телефонов.

Все это выглядит так:

<!-- get regular CSS -->
<link rel="stylesheet" href="styles/styles.css" type="text/css" media="Screen" />

<!-- get user agent in meta language. and do if/else on result. 
 i'm not going to write that part here, other than pseudocode: -->

if( device is mobile ) {

    <!-- load mobile CSS -->
    <link rel="stylesheet" href="styles/mobile.css" type="text/css" media="handheld" />

    <!-- run jQuery manipulation -->
    <script>
        $(function(){$('a.tel').prop('href',$('a.tel').prop('id'));});
    </script>
}

<p> Call us today at <a class="tel" id='tel:8005551212' href=''>800-555-1212</a>!</p>

Одно предостережение к этому подходу: идентификаторы должны быть уникальными. Если у вас есть повторяющиеся номера телефонов на странице, которую вы хотите связать, измените идентификатор на имя, а затем вы используете jQuery для их перебора.

Для меня самый простой, но самый простой способ без каких-либо новых классов/настроек - через css:

a{
    color: #3399ff;
}

a[href^="tel"]:link,
a[href^="tel"]:visited, 
a[href^="tel"]:hover {
    text-decoration: none;
    color: #000;

    pointer-events: none;
    cursor: default;
}

/* Adjust px here (1024px for tablets maybe) */
@media only screen and (max-device-width: 480px) { 
    a[href^="tel"]:link,
    a[href^="tel"]:visited,
    a[href^="tel"]:hover {
        text-decoration: underline;
        color: #3399ff;

        pointer-events: auto;
        cursor: pointer;
    }
}

Html выглядит так:

<a href="tel:+123-456-7">(+12)3 456 7</a>

Это работает для современных браузеров и IE 11+. Если вам нужно включить 8 ‹ IE ‹ 11, добавьте в свой javascript следующее, поскольку события-указатели не работают в IE:

var msie = window.navigator.userAgent.indexOf("MSIE ");

if (msie > 0){
    var Elems = [], Tags = document.querySelectorAll("a[href^='tel']");

    //Nodelist to array, so we're able to manipulate the elements
    for (var i = 0; i < Tags.length; i++ ) {
        Elems[ i ] = Tags[ i ];
    }

    for(var i = 0; i < Elems.length; i++){
        Elems[ i ].removeAttribute('href');
    }
}

РЕДАКТИРОВАТЬ: я нашел еще один ответ в другом потоке, который может быть вам полезен - SO - Ответ

Вы можете использовать медиа-запросы css, чтобы контролировать, когда он отображается как ссылка, а когда нет.

@media(min-width:768px){
 a[href^="tel:"] {
  pointer-events: none;
 }
}

все, что меньше 768 пикселей, будет работать как ссылка, выше — как текст.

если вы просто хотели отключить щелчок на мобильных экранах:

if(typeof window.orientation !== 'undefined'){
    $('a[href^="tel:"]').on('click', function(e){
        e.preventDefaults();
    });
}

Надеюсь это поможет :)

Я добился успеха с этим, используя Modernizr, в частности, тест touch. Это не идеальное решение, поскольку оно ничего не делает для планшетов или ноутбуков с сенсорным экраном, но оно работает в большинстве ситуаций просмотра на рабочем столе.

HTML:

Call us at: <a href="tel:1-800-BOLOGNA" class="call-us">1-800-BOLOGNA</a>

CSS:

.no-touch a.call-us {
  color: black;            /* use default text color */
  pointer-events: none;    /* prevents click event */
  cursor: text;            /* use text highlight cursor*/
}

Вышеупомянутый CSS предназначен для ссылок с class="call-us" на устройствах без сенсорного экрана, которые охватывают большинство настольных компьютеров.

Обратите внимание, что pointer-events поддерживается во всех современных браузерах, но IE поддерживает его только в версиях 11+. См. таблицу совместимости.

Другим решением, все еще несовершенным, было бы использование Modernizr.mq вместе с Modernizr.touch для определения ширины экрана и возможности касания, а затем вставка телефонной ссылки с помощью jQuery. Это решение удерживает ссылку на телефон в исходном коде, а затем появляется только на сенсорных устройствах, ширина которых меньше определенной (скажем, 720 пикселей, что, вероятно, будет охватывать большинство телефонов, но исключает большинство планшетов).

В конечном счете, поставщики браузеров должны найти здесь пуленепробиваемое решение.

Я нашел лучший способ. Я понимаю, что это старо, но я нашел очень простой способ сделать это.

Используя этот код ниже

<a href=“tel:888-555-5555” class="not-active">888-555-5555</a>

//This is the logic you will add to the media query
.not-active {
   pointer-events: none;
   cursor: default;
}

В вашем CSS используйте медиа-запросы. Так что сделайте медиа-запрос для всех рабочих столов

@media only screen and (min-width: 64em) {
    /* add the code */
    .not-active {
       pointer-events: none;
       cursor: default;
    }
}

Теперь все страницы размером с рабочий стол не смогут щелкнуть по нему.

кажется, это можно сделать с помощью простого медиа-запроса для большинства браузеров. Что-то вроде этого работает как шарм для меня:

<style type="text/css">
    #mobil-tel {
        display:none;
    }

    @media (max-width: 700px) {
        #mobil-tel {
            display:block;
        }

        #desktop-tel{
            display:none;
        }
    }
</style>

и в ссылке для рабочего стола пропустите «href», в ссылке для мобильного телефона введите «href».

Просто подумал, что добавлю свои два цента к обсуждению (которое оказалось довольно длинным).

В основном я использую событие onClick (по ссылке) для выполнения Javascript, чтобы вернуть логическое значение true или false. Если возвращаемое значение истинно, т. е. какая-то переменная или функция, проверяющая, является ли устройство телефоном, возвращает значение true, то браузер следует за URL-адресом href. Если возвращаемое значение равно false, то URL-адрес href фактически становится неактивным. (Стандартное поведение HTML, задолго до HTML5.)

Вот что я имею в виду: -

<html>
<head>
<title>tel markup example</title>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script> <!-- Does not really matter what version of jQuery you use --> 
<script>
var probablyPhone = ((/iphone|android|ie|blackberry|fennec/).test(navigator.userAgent.toLowerCase()) && 'ontouchstart' in document.documentElement);
function initialize() {
	if ( !probablyPhone ) {
		alert ("Your device is probably not a phone");
		( function( $ ) { 
			$( '.call' ).css ( "text-decoration", "none" );
			$( '.call' ).css ( "color", "black" );
			$( '.call' ).css ( "cursor", "default" );			
		} )( jQuery );
	}
}
</script>
</head>
<body onLoad="initialize();">
Please ring (some fictitious number in Australia): <a href="tel://+61391112222" class="call" onClick="return probablyPhone;">+61 3 9111 2222</a>
</body>
</html>

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

Вот суть, которую я создал.

Чтобы закончить этот пост/ответ, благодарим за написание краткого кода JavaScipt для обнаружения телефона (на основе пользовательского агента и события онтачстарт) коллеге из Мельбурна rgb в этом сообщение о переполнении стека

Вот простое решение на основе jquery, которое я разработал для решения этой проблемы. См. комментарии к коду для объяснения. https://jsfiddle.net/az96o8Ly/

// Use event delegation, to catch clicks on links that may be added by javascript at any time.
jQuery(document.documentElement).on('click', '[href^="tel:"]', function(e){
  try{
    // These user-agents probably support making calls natively.
    if( /Android|webOS|iPhone|iPad|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
      // Do nothing; This device probably supports making phone calls natively...
    } else {
      // Extract the phone number.
      var phoneNumber = jQuery(this).attr('href').replace('tel:', '').trim();

      // Tell the user to call it.
      alert("Please call "+phoneNumber);

      // Prevent the browser popup about unknown protocol tel:
      e.preventDefault();
      e.stopPropagation();
    }
  } catch(e){
    console.log("Exception when catching telephone call click!", e);
  }
});

Мой подход похож на другой подход выше; есть несколько соображений, которые я принимаю во внимание:

• Как мы знаем, не существует хорошего программного способа обнаружения поддержки. Это редкий случай, когда мы вынуждены анализировать строку UserAgent.
• Это должно быть на стороне клиента; нет необходимости в обнаружении на стороне сервера.
• Сейчас существуют настольные браузеры, которые могут обрабатывать tel: ссылки; Поведение Chrome на рабочем столе в худшем случае ничего не делает при нажатии. В лучшем случае вы можете позвонить с помощью Google Voice.
• Поскольку ничего не делать при нажатии — это запасной вариант поведения Chrome, мы должны использовать его как запасной вариант во всех браузерах.
• Если ваша страница берет на себя ответственность за создание ссылок tel:, она должна взять на себя ответственность за все ссылки tel: и отключить автоопределение в браузере.

Имея все это в виду, я предлагаю сначала добавить тег meta к вашему <head>:

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

Затем определите функцию JavaScript, которая анализирует UserAgent и возвращает true тогда и только тогда, когда мы думаем, что браузер не выведет нас на страницу с ошибкой при нажатии на ссылку:

function hasTelSupport()
{
    return /Chrome\/|Mobile( Safari)?\/|Opera M(in|ob)i\/|w(eb)?OSBrowser\/|Mobile\;|Tablet\;/.test(navigator.userAgent);
}

Затем вызовите эту функцию из атрибута onclick в вашей ссылке:

<a href="tel:+18005551212" onclick="return hasTelSupport();">Call Me</a>

Это позволит нажимать ссылки tel: в Chrome, Edge, iOS Safari, браузере Android, Blackberry, Dorothy, Firefox Mobile, IE Mobile, Opera Mini, Opera Mobile и webOS. Ссылки ничего не сделают при нажатии на другие устройства или браузеры.

Пожалуйста, используйте международный формат для ваших tel: ссылок. Другими словами, первыми символами должны быть + и код страны.

Благодаря сообщению TattyFromMelbourne я теперь использую довольно простой бит:

Моя кнопка id="call" сделает телефонный звонок на основе его тестовой функции "вероятнотелефон", но также прокрутит вниз до раздела контактной информации в любом случае, давая кнопке рабочее использование, несмотря ни на что.

Я также заменил предупреждение пустой функцией, чтобы удалить всплывающее окно.

<a id="call" href="#contact">PHONE US</a>


$("#call").on('click', function() {
    var probablyPhone = ((/iphone|android|ie|blackberry|fennec/).test(navigator.userAgent.toLowerCase()) && 'ontouchstart' in document.documentElement);
    var link = "callto:15555555555";
        if ( !probablyPhone ) {
            window.alert = function() {};}              
    else{window.location.href = link;}
});
    </script>

Вы можете использовать медиа-запросы css3 для обнаружения мобильного окна и соответствующего скрытия ссылки.

@media(max-width:640px){
 .your-calling-link{
display:none;
}
}

В качестве альтернативы, если вы хотите показать ссылку и просто отключить функцию щелчка, используйте функцию jquery:

screen.width 

or

screen.innerWidth

и отключите функцию щелчка по ссылке, используя

 $('.your-link').off(click);

Один из способов справиться с этим — создать два отдельных div и использовать display:hidden.

Пример:

<div class="mobile-desktop"><p>123-456-7890</p></div>
<div class="mobile-mobile"><a href="tel:123-456-7890">123-456-7890</a></div>

В вашем css установите точки останова для мобильных устройств. Эта часть действительно зависит от вас. скажем

@media only screen (min-width: 768px){

.mobile-mobile {
display:none;
}

}

@media only screen (max-width: 767px){

.mobile-desktop{
display:none;
}

}

Это должно позволить вам скрыть один div в зависимости от размера экрана. Конечно, 789 — это просто номер, который я выбрал, поэтому выберите размер, который вы считаете мобильным. Вы можете найти их в Интернете, например, на на этом сайте, который я нашел в Google или на других сайтах. нравится. Наконец, это всего лишь быстрая CSS-разметка, возможно, вам придется повозиться, но идея есть.

Этот способ работает без дополнительного добавления CSS.

Попробуйте заменить тег a чем-то другим, например тегом span, но, конечно, только для мобильных браузеров. Преимущество заключается в том, что вы не скрываете этот a с помощью CSS, предотвращая действие по умолчанию, сохраняя при этом его как ссылку. a больше не будет, так что вам не о чем беспокоиться.

Я создал пример для здесь. Жирный телефон работает так, см. код ниже.

Я взял фрагмент кода от одного из респондентов, чтобы определить, является ли браузер мобильным. И вы должны пометить эти ссылки class="tel" или найти способ определить, есть ли в href "tel:". JQuery также требуется.

// define if browser is mobile, usually I use Anthony's Hand mobile detection library, but here is simple detection for clarity
var probablyPhone = ((/iphone|android|ie|blackberry|fennec/).test(navigator.userAgent.toLowerCase()) && 'ontouchstart' in document.documentElement);
if ( !probablyPhone ) {
    // find all the A with "tel:" in it, by class name
    $('a.tel').each(function(){
        var span = document.createElement('span');

        // SPAN inherits properties of A, you can also add STYLE or TITLE or whatever
        span.innerHTML = this.innerHTML;
        span.className = this.className;

        // replace A with SPAN
        this.parentNode.insertBefore(span, this);
        this.parentNode.removeChild(this);
    });
}

Введите это в пользовательский css и назовите это днем:

a.tel { color: #FFFFFF; cursor: default; /* no hand pointer */ }

Измените цвет по мере необходимости.

Ваше здоровье!

Я добавляю следующий css через javascript при обнаружении мобильного устройства.

pointer-events:none

JS-код:

var a = document.getElementById("phone-number");
if (Platform.isMobile())   // my own mobile detection function
    a.href = "tel:+1.212.555.1212";
else
    $(a).css( "pointer-events", "none" );

На моем целевом сайте все разметки телефонных ссылок имеют следующий шаблон: <a href="tel:111-222-3333"">111-222-3333</a>. Мое решение такое простое:

function setPhoneLink() {
    if (screen.width > 640) {
        $("a[href^='tel:']").each(function(){
            $(this).replaceWith($(this).text());
        });
    }
} 

Ширина устройства: мобильный‹640; таблетка >=768 и ‹1024; рабочий стол >=1024. Источник: http://javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml