How do I disable tel: URLs for desktop while keeping them live(dialable) for phones?

Question

I am working on an interactive map project in which a phone number is shown in an info window for each respective facility location on a map, along with an address and a link to a separate web page that has more info about that facility. I have the phone numbers set up as hyperlinks using tel://+1-xxx-xxx-xxxx, and they are styled so they just look like bold text, not default hyperlinks. On the desktop, naturally the cursor changes to show there's a link when you roll over the phone number. If you click on it, you can get varying results, most of which my client would prefer not to have. So, we want the phone numbers NOT to be functional on the desktop, but keep their functionality on the phone as they are now. I am guessing it will take extra code to disable the tel: URLs on the desktop only, but if anyone knows of something I can do directly in InDesign and/or in5 with settings to make this happen, that would be great. Or, if there IS some self-contained code I can attach to the in5 dialog box when exporting (multi-page web), please point me in the right direction. I've already done some research on this, but am finding conflicting info. I'm trying to avoid creating two versions and having to do device detection to serve the proper one. We want to keep this as streamlined but functional as possible. Thanks for your help!!

Answer 1

You can attach the following as a .js file in the Resources section of the in5 dialog:

if(!touchEnabled) {
	$(function(){
		$("[href^='tel:']").css({'pointer-events':'none', 'cursor':'default'}).on('click',function(e){ return false; });
	});
}

It should override the click actions on any telephone line on non-touch devices.

Comments

Justin, and anyone else who's looking to address this need: The .js code that wound up solving the problem of disabling phone number links on desktop computers is shown below. I believe K.O. emailed you a clarification on more recent iOS requirements that were causing some issues with the code above that I said worked (but didn't after further testing). So here is what seems to have worked:
-----------------
if(!isIOS && !(/iPad|iPhone|iPod/.test(navigator.platform)) && !isAndroid) {
  $(function(){
    $("[href^='tel:']").removeAttr("href");
  });
}

---

And thank you for suggesting who to talk to. Worked out well and much appreciated.

---

So glad you worked it out. KO did circle back to me. The code in the official answer above will work as expected in v3.6. Until then, the code that you posted will work with v3.5.4. :-)

---

I'll have to keep that in mind if I'm still working on this project when 3.6 comes out! Then I'll be appending the wrong code. :-o  So if some day I export the site and it's broken, I'll know why. :-)

---

Don't worry. Your code will still work. :-)