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

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

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

затем просто "display:none;" на соответствующем классе в зависимости от размеров Вашего браузера?

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

Я закончил тем, что сделал это так:

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

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

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

далее, мой тег 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>

одно предостережение к этому подходу: id должны быть уникальными. Если у вас есть дубликаты телефонных номеров на странице, которую вы хотите связать, измените идентификатор на имя, затем используйте 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

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');
    }
}

EDIT: я нашел другой ответ в другом потоке, который может быть полезен для вас -так - ответ

у меня был успех с этим использованием Modernizr, в частности

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

Я в основном использую событие onClick (по ссылке) для выполнения Javascript для возврата логического true или false. Если возвращаемое значение true, т. е. некоторая переменная или функция, которая проверяет, является ли устройство телефоном, возвращает значение 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 для обнаружения телефона (на основе агента пользователя и события ontouchstart) переходит к коллеге Melbournian RGB с в этой сообщение stackoverflow

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

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

надеюсь, что это помогает :)

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

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

<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".

вот простое решение на основе 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);
  }
});

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

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

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

<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 

или

screen.innerWidth

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

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

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

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

все, что ниже 768px будет работать как ссылка, выше этого, как текст.

этот способ работает без добавления каких-либо CSS.

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

Я создал пример здесь. Bold phone там работает таким образом, см. код ниже.

I взял кусок кода у одного из респондентов, чтобы определить, является ли браузер мобильным. И вы должны отметить эти ссылки с 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);
    });
}

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

• как мы знаем, нет хорошего программного способа обнаружения поддержки. Это редкий случай, когда мы вынуждены анализировать строку 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 Browser, Blackberry, Dorothy, Firefox Mobile, IE Мобильный, Opera Mini, Opera Mobile и webOS. Ссылки ничего не будут делать при нажатии на другие устройства или браузеры.

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

введите это в пользовательский 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" );

@media screen {.telephone {pointer-events: none;}}