如何在桌面上禁用电话号码链接？

时间：2013-03-15 05:25:00

标签： web tel

如何在可点击的网站上添加电话号码，但在浏览不支持触摸的网站时隐藏链接。

我可以使用Modernizr进行设置。我不知道怎么做。

<a href="tel:1300723579"><p><img src="assets/images/bt_calltoaction.gif" alt="View Projects" width="306" height="60"></p></a>

20 个答案:

答案 0 :(得分：34)

你能两次使用代码吗？即... 

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

然后只是'display：none;'相关课程取决于您的浏览器尺寸？

答案 1 :(得分：8)

我正在处理这个问题，查找解决方案，然后我找到了这个帖子（还有其他几个）。我必须承认，我无法让他们中的任何一个正常工作。我确定我做错了什么，但我确实弄明白了。

正如其他人所指出的那样，更改CSS以隐藏可见链接指示（color，text-decoration，cursor）是第一个也是最简单的步骤。作弊是为title链接定义tel。

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

通过这样做，不仅伪装的链接的可见指示符（通过CSS - 参见其他人的示例），但如果有人将鼠标悬停在链接上，标题将弹出并说“点击拨号 - 仅限移动设备”。这样，不仅有更好的用户体验，而且您的客户也不会指责您的链接断开！

答案 2 :(得分：7)

我最近遇到了同样的问题。这个问题遍及stackoverflow和其他任何地方。你如何隐藏'tel：'前缀并防止它在常规浏览器中爆炸。没有好的单一答案。

我最终这样做了：

首先我使用metalanguage根据useragent字符串过滤浏览器与移动设备（如php / coldfusion / perl）：

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

这为我提供了桌面浏览器与手机的if / else条件。

接下来，我的href标记如下所示：<a class="tel" id='tel:8005551212' href=''>800-555-1212</a>

使用CSS在桌面样式表中设置.tel类的样式，使其看起来不像是桌面浏览器的链接。电话号码仍然可以点击但不明显，它不会做任何事情：

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

最后，我在移动链接上做了一点jquery。 jQuery从a.tel类中获取id，并将其插入到href属性中，这使得它可以为电话用户点击。

整件事看起来像这样：

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

这种方法的一个警告：id应该是唯一的。如果您要链接的页面上有重复的电话号码，请将ID更改为name，然后使用jQuery循环遍历它们。

答案 3 :(得分：4)

对我来说，没有任何新类/设置的最简单，最简单的方法是通过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就是这样：

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

这适用于现代浏览器＆amp; IE 11+。如果你需要包括8＆lt; IE＆lt; 11将以下内容添加到您的javascript中，因为指针事件在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');
    }
}

编辑：我在另一个帖子上找到了另一个答案，可能对你有用 - SO - Answer

答案 4 :(得分：3)

您可以使用css媒体查询来控制何时将其视为链接，何​​时不会。

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

低于768px的任何内容都可以作为链接使用，就像文本一样。

答案 5 :(得分：2)

我找到了最好的方法。我知道这是旧的，但我找到了一种非常简单的方法。

使用以下代码

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

在CSS中使用媒体查询。 因此，对所有桌面进行媒体查询

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

现在所有桌面大小的页面都无法点击它。

答案 6 :(得分：2)

似乎可以通过大多数浏览器的简单媒体查询来完成。像这样的东西对我来说就像是一种魅力：

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

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

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

在桌面链接上，省略移动链接上的'href'，放入'href'。

答案 7 :(得分：2)

如果你只是想禁用移动屏幕上的点击：

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

希望这会有所帮助：）

答案 8 :(得分：2)

以为我会加上我的2美分价值（结果是相当冗长的）讨论。

我基本上使用onClick事件（在链接上）执行Javascript以返回布尔值true或false。如果返回值为true，即测试设备是否为电话的某个变量或函数返回值true，则浏览器将跟随href URL。如果返回值为false，则href URL实际上变为非活动状态。 （标准HTML行为，HTML5之前的方式。）

这就是我的意思： -

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

请注意，我还添加了一些链接的重新格式化，以使其对用户显示，就像它只是普通文本一样。

Here is a gist I created.

只是为了完成这篇文章/回答，写下用于检测手机的简洁JavaScipt代码（基于用户代理和ontouchstart事件）的信用归于一个同事Melbournian rgb {{3 }}

答案 9 :(得分：2)

我使用Modernizr取得了成功，特别是touch测试。它不是一个完美的解决方案，因为它无法帮助平板电脑或支持触控的笔记本电脑，但它适用于大多数桌面浏览环境。

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

上述CSS定位了覆盖大多数桌面的非触控设备上与class="call-us"的链接。

请注意，所有现代浏览器都支持pointer-events，但IE仅支持版本11+。请参阅compatibility chart。

另一个仍然不完美的解决方案是使用Modernizr.mq和Modernizr.touch来检测屏幕宽度和触摸功能，然后使用jQuery注入手机链接。此解决方案使电话链接远离源代码，然后仅出现在小于特定宽度的触摸设备上（例如，720px可能覆盖大多数手机，但不包括大多数平板电脑）。

最终，浏览器供应商可以在这里提出一个防弹解决方案。

答案 10 :(得分：1)

这是一个简单的基于jquery的解决方案，我为解决这个问题而开发。请参阅代码注释以获取解释 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);
  }
});

答案 11 :(得分：1)

感谢TattyFromMelbourne的帖子，我现在使用了一个非常简单的部分：

我的按钮id =“呼叫”将根据他的“可能的电话”测试功能进行电话呼叫，但也会向下滚动到联系信息部分，无论如何都会使按钮具有工作用途。

我用一个空函数替换警报，删除弹出窗口。

<a id="call" href="#contact">PHONE US</a>


$("#call").on('click', function() {
    var probablyPhone = ((/iphone|android|ie|blackberry|fennec/).test(navigator.userAgent.toLowerCase()) && 'ontouchstart' in document.documentElement);
    var link = "callto:15555555555";
        if ( !probablyPhone ) {
            window.alert = function() {};}              
    else{window.location.href = link;}
});
    </script>

答案 12 :(得分：1)

您可以使用css3媒体查询来检测移动窗口并相应地隐藏链接。

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

或者，如果要显示链接并仅禁用单击功能，请使用jquery函数：

screen.width

或

screen.innerWidth

并使用

禁用链接上的点击功能 
 $('.your-link').off(click);

答案 13 :(得分：1)

一种解决方法是创建两个单独的div并使用display：hidden。

示例：

<div class="mobile-desktop"><p>123-456-7890</p></div>
<div class="mobile-mobile"><a href="tel:123-456-7890">123-456-7890</a></div>

在CSS中设置移动断点。这部分实际上取决于您。假设

@media only screen (min-width: 768px){

.mobile-mobile {
display:none;
}

}

@media only screen (max-width: 767px){

.mobile-desktop{
display:none;
}

}

这应该使您可以根据屏幕大小隐藏一个div。授予789只是我选择的数字，因此选择一个您认为可以移动的尺寸。您可以在this site I found on Google or others like it之类的网站上找到它们。最后，这只是一个快速的CSS标记，您可能需要修改一下，但是想法就在那里。

答案 14 :(得分：0)

这种方式无需添加任何CSS即可使用。

尝试将a标记替换为span标记之类的内容，但当然仅适用于移动浏览器。好处是，您不会使用CSS隐藏此a，以防止默认操作，同时将其保持为链接。它不再是a，所以你不必担心。

我已经为here创建了一个示例。大胆的手机就是这样的，请看下面的代码。

我从一位受访者那里获取了一段代码来定义浏览器是否是移动的。您必须使用class="tel"标记这些链接，或者找到一种方法来确定href是否有＆＃34; tel：＆＃34;在里面。 JQuery也是必需的。

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

答案 15 :(得分：0)

我的方法类似于上面的另一种方法;我考虑了一些注意事项：

  • 众所周知，没有良好的程序化方法来检测支持。这是一种罕见的情况，我们被迫解析UserAgent字符串。
  • 这应该是客户端;不需要服务器端检测。
  • 现在有桌面浏览器可以处理tel:个链接;在最糟糕的情况下，Chrome在桌面上的行为在点击时无效。最多，您可以使用Google Voice拨打电话。
  • 因为点击时无所事事是Chrome的后备行为，我们应该将该行为用作所有浏览器的后备。
  • 如果您的网页负责创建tel:个链接，则应对所有tel:链接负责，并在浏览器中禁用自动检测。

考虑到所有这一切，我建议您首先在meta添加<head>标记：

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

然后，定义一个解析UserAgent并返回true的JavaScript函数，当且仅当我们认为浏览器不在点击链接时将我们带到错误页面时：< / p> 

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

然后，从链接中的onclick属性调用该函数：

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

这样就可以在Chrome，Edge，iOS Safari，Android浏览器，Blackberry，Dorothy，Firefox Mobile，IE Mobile，Opera Mini，Opera Mobile和webOS上点击tel:个链接。单击其他设备或浏览器时，链接将不执行任何操作。

请为您的tel:链接使用国际格式。换句话说，第一个字符应为+和国家/地区代码。

答案 16 :(得分：0)

将此输入自定义css并将其称为一天：

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

根据需要更改颜色。

干杯！

答案 17 :(得分：0)

我在检测到移动设备时通过javascript添加以下css。

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

js代码是：

LongStream

答案 18 :(得分：-1)

在我的目标站点中，所有电话链接标记均采用以下模式： keyword。我的解决方法很简单：

<a href="tel:111-222-3333"">111-222-3333</a>

设备宽度：移动<640；平板电脑> = 768和<1024；桌面> = 1024。 来源：http://javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml

答案 19 :(得分：-3)

@media screen {.telephone {pointer-events: none;}}
相关问题
最新问题