Web 如何在桌面上禁用电话号码链接？
当我在不支持触摸的网站上浏览时，如何向可点击但隐藏链接的网站添加电话号码 不过我可以用Modernizer来设置它。我不知道怎么做Web 如何在桌面上禁用电话号码链接？,web,tel,Web,Tel,当我在不支持触摸的网站上浏览时，如何向可点击但隐藏链接的网站添加电话号码 不过我可以用Modernizer来设置它。我不知道怎么做 <a href="tel:1300723579"><p><img src="assets/images/bt_calltoaction.gif" alt="View Projects" width="306" height="60"></p></a> 我最近也遇到了同样的问题。这个问题遍及stackove
<a href="tel:1300723579"><p><img src="assets/images/bt_calltoaction.gif" alt="View Projects" width="306" height="60"></p></a>
我最近也遇到了同样的问题。这个问题遍及stackoverflow和其他任何地方。如何隐藏“tel:”前缀并防止其在常规浏览器中爆炸。没有好的单一答案 我最终是这样做的： 首先，我使用metalanguage根据useragent字符串过滤浏览器与移动设备（如php/coldfusion/perl）：
regular exp match for "/Android|webOS|iPhone|iPad|BlackBerry/i",CGI.HTTP_USER_AGENT
/* 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;
}
<!-- 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>
<a href="tel:+123-456-7">(+12)3 456 7</a>
如果（设备是移动的）{
$（function（）{$（'a.tel'）.prop（'href'，$（'a.tel'）.prop（'id'）；}）；
}
今天打电话给我们
这种方法有一个警告：id应该是唯一的。如果要链接的页面上有重复的电话号码，请将id更改为name，然后使用jQuery循环浏览这些号码。我正在处理此问题，查找解决方案，发现了此线程（以及其他一些线程）。我必须承认我不能让他们中的任何一个正常工作。我肯定我做错了什么，但我确实发现了一个骗局 正如其他人指出的，更改CSS以隐藏可见链接指示（
颜色文本装饰光标tel标题
<p>Just call us at <a class="cssclassname" href="tel:18005555555"
title="CLICK TO DIAL - Mobile Only">(800) 555-5555</a>.</p>
请打电话给我们
通过这样做，不仅可以隐藏链接的可见指示器（通过CSS-参见其他示例），而且如果有人将鼠标悬停在链接上方，标题将弹出并显示“单击拨号-仅限移动”。这样，不仅有更好的用户体验，而且你的客户不会指责你的链接断了 你能把代码输入两次吗？i、 e
<div class="desktoptel">0800 000 000</div>
<div class="mobiletel"><a href="tel:0800-000-000">0800-000-000</div>
0800 000
0800-000-000
然后只需“显示：无；”根据您的浏览器大小，在相关的类上？我使用Modernizer，特别是touch
测试取得了成功。这并不是一个完美的解决方案，因为它对平板电脑或支持触摸功能的笔记本电脑没有任何帮助，但它可以在大多数桌面浏览情况下工作
HTML:
联系我们：
CSS:
上述CSS针对的是覆盖大多数台式机的非触摸设备上的class=“call us”
链接
请注意，指针事件
在所有现代浏览器中都受支持，但IE仅在版本11+中支持。看
另一个仍然不完善的解决方案是使用Modernizr.mq
和Modernizr.touch
来检测屏幕宽度和触摸功能，然后用jQuery注入电话链接。此解决方案将电话链接保留在源代码之外，然后仅出现在小于一定宽度的触摸设备上（例如720px，可能覆盖大多数电话，但不包括大多数平板电脑）
最终，由浏览器供应商在这里提出一个防弹解决方案。对我来说，没有任何新类/设置的最简单方法是通过css：
@media screen {.telephone {pointer-events: none;}}
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就是这样：
<!-- 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>
<a href="tel:+123-456-7">(+12)3 456 7</a>
这适用于现代浏览器&ie11+。如果需要包含8
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');
}
}
var msie=window.navigator.userAgent.indexOf（“msie”）；
如果（msie>0）{
var Elems=[]，Tags=document.querySelectorAll（“a[href^='tel']）；
//Nodelist到数组，这样我们就可以操纵元素了
对于（var i=0；i
编辑：我在另一个帖子上找到了另一个答案，这可能对你有用-我只是想在讨论中加上我的两分钱
我基本上使用onClick事件（在链接上）来执行Javascript以返回布尔值true或false。如果返回值为true，即测试设备是否为手机的某个变量或函数返回值为true，则href URL后面跟着浏览器。如果返回值为false，则href URL实际上变为非活动。（标准HTML行为，早于HTML5。）
我的意思是：-
电话标记示例
var probablyPhone=（/iphone | android | ie | blackberry | fennec/）.test（navigator.userAgent.toLowerCase（））和document.documentElement中的&“ontouchstart”）；
函数初始化（）{
如果（！可能是电话）{
警报（“您的设备可能不是电话”）；
（函数（$）{
$（'.call'）.css（“文本装饰”，“无”）；
$（'.call'）.css（“颜色”、“黑色”）；
$（'.call'）.css（“游标”，“默认值”）；
}）（jQuery）；
}
}
请拨打（澳大利亚的一些虚构号码）：
如果您只想禁用移动屏幕上的点击功能：
if(typeof window.orientation !== 'undefined'){
$('a[href^="tel:"]').on('click', function(e){
e.preventDefaults();
});
}
希望这有帮助：）这种方式不需要添加任何CSS
尝试将a
标记替换为类似span
标记的其他标记，但这当然只适用于移动浏览器。好处是，您不会用CSS来掩盖这个a
，从而防止默认操作，同时保持它作为链接的状态。它不再是a
，因此您不必担心
// 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);
}
});
<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;
}
@media only screen and (min-width: 64em) {
/* add the code */
.not-active {
pointer-events: none;
cursor: default;
}
}
<meta name="format-detection" content="telephone=no"/>
function hasTelSupport()
{
return /Chrome\/|Mobile( Safari)?\/|Opera M(in|ob)i\/|w(eb)?OSBrowser\/|Mobile\;|Tablet\;/.test(navigator.userAgent);
}
<a href="tel:+18005551212" onclick="return hasTelSupport();">Call Me</a>
a.tel { color: #FFFFFF; cursor: default; /* no hand pointer */ }
<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>
pointer-events:none
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" );
<style type="text/css">
#mobil-tel {
display:none;
}
@media (max-width: 700px) {
#mobil-tel {
display:block;
}
#desktop-tel{
display:none;
}
}
</style>
@media(max-width:640px){
.your-calling-link{
display:none;
}
}
screen.width
screen.innerWidth
$('.your-link').off(click);
@media(min-width:768px){
a[href^="tel:"] {
pointer-events: none;
}
}
function setPhoneLink() {
if (screen.width > 640) {
$("a[href^='tel:']").each(function(){
$(this).replaceWith($(this).text());
});
}
}
<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>
@media only screen (min-width: 768px){
.mobile-mobile {
display:none;
}
}
@media only screen (max-width: 767px){
.mobile-desktop{
display:none;
}
}