How to disable link to phone number when on Desktop?

Question

How can I add a phone number to a website that is clickable but hides the link when I\'m browsing on a website that doesn\'t support touch.

I could use Modernizr to set

Answer 1

it seems this could be done with a simple media query for most browsers. Something like this is working like a charm for me:

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

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

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

and on the desktop link, leave out the 'href', on the mobile link, put in the 'href'.

Answer 2

I am adding the following css through javascript when mobile device is detected.

pointer-events:none

The js code is:

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" );

Answer 3

I was just dealing with this issue, looking up solutions, and I found this thread (and a few others). I have to confess that I couldn't get any of them to work properly. I'm sure I was doing something wrong, BUT I did figure out a cheat.

As others have pointed out, changing the CSS to hide the visible link indication (color, text-decoration, cursor) is the first and easiest step. The cheat is to define a title for the tel link.

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

By doing this, not only is the visible indicator of a link disguised (via CSS - see examples from others), but if someone does hover over the link, the title will pop up and say "CLICK TO DIAL - Mobile Only". That way, not only is there a better user experience, but your client doesn't accuse you of having a broken link!

Answer 4

I found the best way. I get that this is old, but I found a very easy way of doing this.

Using this code below

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

In your CSS make use of media queries. So make a media query for all desktops

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

Now all desktop sized pages wont be able to click on it.

Answer 5

if you just wanted to disable the click on the mobile screens:

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

Hope this helps :)

Answer 6

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