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

You can use css3 media queries to detect a mobile window and hide the link accordingly.

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

Alternately, if you want to show the link and just disable click functionality, use jquery function:

screen.width 

or

screen.innerWidth

and disable the click functionality on the link using

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

Answer 2

Could you just have the code in twice? i.e...

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

Then just 'display:none;' on the relevant class depending on your browser sizes?

Answer 3

You could use css media queries to control when its viewed as link and when not.

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

anything below 768px will work as link, above that, just as text.

Answer 4

This way works without adding any more CSS.

Try replacing the a tag with something else like a span tag, but only for mobile browsers of course. Benefits are that you are not cloaking this a with CSS preventing default action while keeping it still as a link. It won't be a anymore, so you won't have to worry.

I've created an example to here. Bold phone there works this way, see code below.

I took piece of code from one of the respondent to define if browser is mobile. And you have to mark these links with class="tel" or find a way to determine if the href has "tel:" in it. JQuery is also required.

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

Answer 5

I've had success with this using Modernizr, specifically the touch test. It's not a perfect solution in that it doesn't do anything to help tablets or touch-enabled laptops, but it works in most desktop browsing situations.

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*/
}

The above CSS targets links with class="call-us" on non-touch devices which covers the majority of desktops.

Note that pointer-events is supported in all modern browsers but IE only supports it in versions 11+. See the compatibility chart.

Another solution, still imperfect, would be to use Modernizr.mq along with Modernizr.touch to detect screen width and touch capability and then inject the phone link with jQuery. This solution keeps the phone link out of the source code and then only appears on touch devices smaller than a certain width (say 720px which will probably cover most phones but exclude most tablets).

Ultimately, it's up to the browser vendors to come up with a bulletproof solution here.

Answer 6

I recently had this same problem. This problem is all over stackoverflow and everywhere else. How do you hide 'tel:' prefix and keep it from blowing up in regular browsers. There's no good single answer.

I ended up doing it this way:

first I use metalanguage to filter browser vs mobile (like php/coldfusion/perl) based on useragent string:

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

that gives me an if/else condition for desktop browser vs phone.

Next, my href tag looks like this: <a class="tel" id='tel:8005551212' href=''>800-555-1212</a>

Use CSS to style the .tel class in desktop stylesheet so it doesn't look like a link to desktop browsers. the phone number can still be clicked but its not obvious, and it wont do anything:

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

Finally, I do a little jquery on the mobile links. The jQuery gets the id from the a.tel class, and inserts it into the href property, which makes it clickable for phone users.

The whole thing looks like this:

<!-- 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>

One caveat to this approach: id's should be unique. If you have duplicate phone numbers on a page that you want to link, change the id to name, then you use jQuery to loop through them.