发表新帖
发表新帖

How to disable link to phone number when on Desktop?

后端 未结
关注
20 935
清酒与你
清酒与你 2021-02-03 23:47

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

相关标签:
20条回答
  • 挽巷
    2021-02-04 00:02

    Just thought I would add my two-cents worth to (what is turning out to be a rather lengthy) discussion.

    I basically use the onClick event (on the link) to execute Javascript to return a boolean true or false. If the return value is true, i.e. some variable or function that tests if the device is a phone returns a value true, then the href URL is followed by the browser. If the the return value is false, then the href URL becomes, in effect, inactive. (Standard HTML behavior, way before HTML5.)

    Here is what I mean:-

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

    Note that I also added some re-formatting of the link to make it appear to the user as if it's just ordinary text.

    Here is a gist I created.

    Just to finish this post/ answer, credit for writing succinct JavaScipt code for detecting a phone (based on the user agent and the ontouchstart event) goes to a fellow Melbournian rgb in this stackoverflow post

    0 讨论(0)
  • 伪装坚强ぢ
    2021-02-04 00:02

    In my target site, all phone link markups are in this pattern: <a href="tel:111-222-3333"">111-222-3333</a>. My solution is such simple:

    function setPhoneLink() {
    if (screen.width > 640) {
        $("a[href^='tel:']").each(function(){
            $(this).replaceWith($(this).text());
        });
    }
}

    Device-width: mobile<640; tablet >=768 and <1024; desk >=1024. Source: http://javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml

    0 讨论(0)
  • 甜味超标
    2021-02-04 00:04

    My approach is similar to another approach above; there are a few considerations I take into account:

    • As we know, there is no good programmatic way to detect support. This is a rare case where we are forced to parse the UserAgent string.
    • This should be client side; there is no need for server side detection.
    • There are now desktop browsers that can handle tel: links; Chrome's behavior on the desktop is, at worst, to do nothing when clicked. At best, you can make a call with Google Voice.
    • Because doing nothing when clicked is Chrome's fallback behavior, we should use that behavior as a fallback on all browsers.
    • If your page takes responsibility for creating tel: links, it should take responsibility for all tel: links and disable autodetection in the browser.

    With all of this in mind, I suggest first adding a meta tag to your <head>:

    <meta name="format-detection" content="telephone=no"/>

    Then, define a JavaScript function that parses the UserAgent and returns true if and only if we think the browser will not bring us to an error page when the link is clicked:

    function hasTelSupport()
{
    return /Chrome\/|Mobile( Safari)?\/|Opera M(in|ob)i\/|w(eb)?OSBrowser\/|Mobile\;|Tablet\;/.test(navigator.userAgent);
}

    Then, call that function from the onclick attribute in your link:

    <a href="tel:+18005551212" onclick="return hasTelSupport();">Call Me</a>

    This will allow tel: links to be clicked on Chrome, Edge, iOS Safari, Android Browser, Blackberry, Dorothy, Firefox Mobile, IE Mobile, Opera Mini, Opera Mobile, and webOS. The links will do nothing when clicked on other devices or browsers.

    Please use international format for your tel: links. In other words, the first characters should be a + and a country code.

    0 讨论(0)
  • 春和景丽
    2021-02-04 00:05

    Here is a simple jquery-based solution which I developed to solve this problem. See code comments for explanation. 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);
  }
});
    0 讨论(0)
  • 故里飘歌
    2021-02-04 00:05

    Input this into custom css and call it a day:

    a.tel { color: #FFFFFF; cursor: default; /* no hand pointer */ }

    Change your color as needed.

    Cheers!

    0 讨论(0)
  • 星月不相逢
    2021-02-04 00:07

    For me the easiest, yet simplest method without any new classes / setup is via 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 just goes like this:

    <a href="tel:+123-456-7">(+12)3 456 7</a>

    This works for modern browsers & IE 11+. If you need to include 8 < IE < 11 add the following to your javascript, since pointer-events dont work in IE:

    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: i found another answer on another thread, that may be useful for you - SO - Answer

    0 讨论(0)
 看不清?
提交回复
热议问题