web - 在桌面上如何禁用与电话号码的链接？

Question

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

我可以使用 Modernizr 来设置它。我不知道怎么做。

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

score 34 · Accepted Answer

你能把代码输入两次吗？IE..

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

然后只是'显示：无;' 根据您的浏览器大小在相关类上？

score 9 · Accepted Answer

我只是在处理这个问题，查找解决方案，然后我找到了这个线程（以及其他一些线程）。我不得不承认我无法让它们中的任何一个正常工作。我确定我做错了什么，但我确实发现了作弊。

正如其他人指出的那样，更改 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 - 参见其他人的示例），而且如果有人确实将鼠标悬停在链接上，标题将弹出并显示“点击拨号 - 仅限移动设备”。这样，不仅有更好的用户体验，而且您的客户也不会指责您的链接断开！

score 7 · Accepted Answer

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

这适用于现代浏览器和 IE 11+。如果您需要包含 8 < IE < 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');
    }
}

编辑：我在另一个线程上找到了另一个答案，这可能对你有用 - 所以- 答案

score 6 · Accepted Answer

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

我最终这样做了：

首先，我使用元语言根据用户代理字符串过滤浏览器与移动设备（如 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 循环访问它们。

score 6 · Accepted Answer

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

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

低于 768px 的任何内容都将作为链接，在此之上，就像文本一样。

score 3 · Accepted Answer

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

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

希望这可以帮助：）

score 2 · Accepted Answer

我使用 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+ 版本中支持它。请参阅兼容性图表。

另一种仍然不完善的解决方案是使用Modernizr.mqwithModernizr.touch来检测屏幕宽度和触摸能力，然后使用 jQuery 注入电话链接。此解决方案将电话链接保留在源代码之外，然后仅出现在小于一定宽度的触摸设备上（比如 720 像素，这可能会覆盖大多数手机，但不包括大多数平板电脑）。

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

score 2 · Accepted Answer

对于大多数浏览器来说，这似乎可以通过简单的媒体查询来完成。这样的事情对我来说就像一个魅力：

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

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

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

在桌面链接上，省略“href”，在移动链接上，放入“href”。

score 2 · Accepted Answer

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

在下面使用此代码

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

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

score 1 · Accepted Answer

只是想我会把我的两分钱加到（结果是相当冗长的）讨论中。

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

这就是我的意思：-

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

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

这是我创建的要点。

为了完成这篇文章/答案，编写简洁的 JavaScipt 代码以检测电话（基于用户代理和 ontouchstart 事件）的功劳归于这个stackoverflow 帖子中的墨尔本rgb同胞

score 1 · Accepted Answer

One way of handling this is to create two separate divs and use display:hidden.

Example:

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

In your css set your mobile break points. This part is really up to you. Let's say

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

.mobile-mobile {
display:none;
}

}

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

.mobile-desktop{
display:none;
}

}

This should let you hide one div based on screen size. Granted 789 is just a number I picked, so pick a size you believe is mobile. You can find them online at like this site I found on Google or others like it. Lastly, this is just a quick css markup, you might have to tinker but the idea is there.

score 1 · Accepted Answer

这是我为解决这个问题而开发的一个简单的基于 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);
  }
});

score 1 · Accepted Answer

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

众所周知，没有很好的编程方式来检测支持。这是我们被迫解析 UserAgent 字符串的罕见情况。
这应该是客户端；不需要服务器端检测。
现在有可以处理tel:链接的桌面浏览器；Chrome 在桌面上的行为在最坏的情况下是点击时什么都不做。充其量，您可以使用 Google Voice 拨打电话。
因为点击时什么都不做是 Chrome 的后备行为，我们应该使用该行为作为所有浏览器的后备。
如果您的页面负责创建tel:链接，它应该负责所有tel:链接并禁用浏览器中的自动检测。

考虑到所有这些，我建议首先meta在您的<head>:

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

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

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>

这将允许tel:在 Chrome、Edge、iOS Safari、Android 浏览器、Blackberry、Dorothy、Firefox Mobile、IE Mobile、Opera Mini、Opera Mobile 和 webOS 上单击链接。在其他设备或浏览器上单击时，这些链接将不起作用。

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

score 1 · Accepted Answer

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

我的按钮 id="call" 将根据他的“可能电话”测试功能拨打电话，但也将向下滚动到联系信息部分，无论哪种方式都可以使按钮正常使用。

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

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

score 1 · Accepted Answer

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

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

或者，如果您想显示链接并禁用点击功能，请使用 jquery 功能：

screen.width

或者

screen.innerWidth

并使用禁用链接上的点击功能

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

score 0 · Accepted Answer

在我的目标站点中，所有电话链接标记都采用这种模式： <a href="tel:111-222-3333"">111-222-3333</a>. 我的解决方案很简单：

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

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

score 0 · Accepted Answer

这种方式无需添加任何 CSS 即可工作。

尝试用a其他类似标签的东西替换span标签，但当然只适用于移动浏览器。好处是你不会a用 CSS 来掩盖它，防止默认操作，同时保持它作为链接。它不会a了，所以你不必担心。

我在这里创建了一个示例。那里的粗体电话以这种方式工作，请参见下面的代码。

我从一位受访者那里获取了一段代码来定义浏览器是否是移动的。而且您必须用标记这些链接class="tel"或找到一种方法来确定其中是否href有“tel：”。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);
    });
}

score 0 · Accepted Answer

不要使用屏幕尺寸作为要求。

您可以像这样使用 CSS 媒体查询：

@media (pointer: fine) { /* this is for devices using a mouse, maybe a pen */
    a[href^="tel:"] { /* select only "tel:" links */
        pointer-events: none; /* avoid clicks on this element */
    }
}

@media (pointer: coarse) { /* this works for mobile phones */
}

更多信息：https ://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer

score 0 · Accepted Answer

将其输入自定义 css 并收工：

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

根据需要更改颜色。

干杯!

score 0 · Accepted Answer

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

pointer-events:none

js代码是：

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

score -3 · Accepted Answer

-3

@media screen {.telephone {pointer-events: none;}}

于 2014-08-08T11:12:46.273 回答

web - 在桌面上如何禁用与电话号码的链接？

21 回答 21

Related

Reference