Use jQuery to detect whether a device can make telephone calls (supports "tel://" protocol)

Question

In my website, I have several links like so:

<a href="tel://+12181112222" class="call">218.111.2222</a>

I want to use jQuery (or other method) to determine whether the device supports making calls / using the tel:// protocol. Does such a method exist in the world?

I want to use some method for enabling or disabling the links, because when clicked on desktop we come to a page like "Firefox doesn't know how to open this address, because the protocol (tel) isn't associated with any program."

Currently, I am sniffing the user agent and detecting if it is a mobile device. But, is there a better/accurate way? Something like jQuery's $.support.xx?

if ( (/iPhone|iPod|iPad|Android|BlackBerry/).test(navigator.userAgent) != true ){
    $(".call").attr("href", "#");
}

http://stackoverflow.com/questions/12141909/detecting-html-a-click-to-call-support-in-javascript — dsgriffin, Jun 27 '13 at 13:58
@Zenith that question is relevant but it contains no discussion of how one would detect when including `tel:` links will work. — Pointy, Jun 27 '13 at 14:05
@Zenith thank you, this is helpful, but as Pointy mentioned it does not in fact detect specifically whether `tel://` is supported. That is what I am trying to achieve - the user agent testing, I've got handled... just wondering/hoping for something that more accurately describes whether the device can handle `tel://`. — Patrick Moore, Jun 27 '13 at 14:20
@SetSailMedia Sorry, I meant to say take a look at the sidebar too (I didn't vote to close btw). Check out the comments on this question - http://stackoverflow.com/questions/16810356/check-if-a-href-tel5555555-is-supported?lq=1 — dsgriffin, Jun 27 '13 at 14:23
This question is also relevant: http://stackoverflow.com/questions/2872090/how-to-check-if-a-custom-protocol-supported , it contains how to check if certain browsers support a protocol — Eric Beaulieu, Jun 27 '13 at 14:51
possible duplicate of [Can you detect whether a device has phone capabilities (e.g. it can make voice calls/SMS) with JavaScript?](http://stackoverflow.com/questions/6931763/can-you-detect-whether-a-device-has-phone-capabilities-e-g-it-can-make-voice-c) — Volker E., Sep 30 '14 at 10:33

score 13 · Accepted Answer · answered Jun 27 '13 at 14:45

13

I'm not sure about Android or BlackBerry, but iOS will automatically pick up telephone numbers and wrap them like so: <a href="tel:xxx">xxx</a>...so you could have a hidden <div> somewhere that contains a phone number like 1-800-555-5555, then, on page load do something like this:

var isTelephone = $("a[href*='tel:']").length > 0;

This may or may not be portable to other platforms, you'll have to try it out.

answered Jun 27 '13 at 14:45

Adrien Delessert

1,360
12
17

Android seems to assume that a series of numbers is a telephone number and tries to call it when clicked on – Jez D Jul 30 '13 at 09:56
3

I know I'm horribly late, but I found [this article](http://code.tutsplus.com/tutorials/mobile-web-quick-tip-phone-number-links--mobile-7667) which discusses which formats are recognized by which types of phones. You'll want to pick a format for your hidden `
` number that both Android and iPhone can recognize, otherwise your work will be in vain!
– Meshaal May 11 '14 at 06:53
This doesn't seem to work. Can anyone create a test page where this does work properly? Google Chrome on Android seems to ignore the `
` even if it is not hidden and even if there is a `` tag in the header.
– Talia Feb 23 '15 at 14:31
Clever hack. However, telephone format detection should always be off via meta tag if your page is explicitly creating `tel:` links. I find UserAgent detection to be more reliable and future proof across the gamut of browsers and devices. – Adam Leggett Feb 01 '16 at 21:41
Skype or other similar software may be a handler of "tel:" protocol, so this way not so good. Often when Skype is installing it also installs some extensions for browsers, that converts ALMOST ALL number sequencies into "tel:" links. – SynCap Mar 18 '17 at 19:27

score 2 · Answer 2 · answered Jun 27 '13 at 15:00

2

One might be able to find the first instance of an href with tel:// in it and post an ajax call. If it was successful it should have a readyState of 1 so do nothing. On failure, find all hrefs with tel:// and grab inner html and replace the a tag.

This is more of a hypothesis and untested.

Another thought is most browser have custom support for phone number formatted strings, If you place in a phone number you shouldn't have to create the a tag as it should be done automatically.

answered Jun 27 '13 at 15:00

ctatro85

311
3
11

OK interesting take on that to just leave out the tag. I was under the impression that even though it is added automatically, that it was best practice? And I will try your suggestion with ajax as well. – JGallardo Aug 02 '13 at 20:33
It's nicer if you at least minimally test before writing an answer that thousands of people will spend time reading :upsidedown-smile: (yes, this comment will auto-destruct after you've read it, so save time for other people... :wink:) – Simon B. May 05 '21 at 07:14
Since custom protocols can be registered based on a persons computer, I couldn't possible test every scenario. Someone could possible have registered tel:// on their computer in which case the ajax request would return a readyState of 1. However, upvoting does allow one to filter through possible answers to find the best solution. AS far testing the scenario, I have used this with other custom protocols (not tel://) on desktop/ tablet. – ctatro85 May 12 '21 at 14:57

score 2 · Answer 3 · answered Sep 19 '13 at 01:48

2

I'm using the following to detect its PROBABLY a phone before enhancing a non link element that into a tel link:

var probablyPhone = (
    (/iphone|android|ie|blackberry|fennec/).test
     (navigator.userAgent.toLowerCase())
     && 'ontouchstart' in document.documentElement
  );

I exclude ipod|ipad because I know they are not phones

The key point here is PROBABLY It will of course return true an some tablet devices, but this enough for my purposes on a non phone touch device the link would just fail anyway - I mostly just want to exclude desktop hence the touch event detect. I suppose also checking device width would narrow it down too but ultimately there is no guaranteed way to detect a mobile device that is capable of phone calls that I've found.

answered Sep 19 '13 at 01:48

rgb

1,246
1
10
14

Touch events may be emulated by software way, Android, blackberry can be tablet, TV, toy, radio etc. – SynCap Mar 18 '17 at 19:10
1

yep but I did post that almost 4 years ago I would not advise to follow something 3 years old without looking for more recent solutions. – rgb Mar 20 '17 at 07:22
:) My comment isn't answer to you, but for those people who reading this from today and ever. For that days - this solution was a perfect enough – SynCap Mar 20 '17 at 10:48

score 1 · Answer 4 · answered Mar 18 '17 at 19:06

Some limited solution can be a way to detect some pure phones. But not all possible:

(function(a) {
 window.isPhone = /\bi?Phone\b|(?=.*\bAndroid\b)(?=.*\bMobile\b)|(?=.*\bAndroid\b)(?=.*\bSD4930UR\b)/i.test(a);
})(navigator.userAgent || navigator.vendor || window.opera);

console.info('This device %s make phone calls', window.isPhone ? 'is originally intended to' : 'probably can\'t' );

Use jQuery to detect whether a device can make telephone calls (supports "tel://" protocol)

4 Answers4

Linked

Related