web-dev-qa-db-fra.com

Comment désactiver le lien vers le numéro de téléphone sur le bureau?

Comment puis-je ajouter un numéro de téléphone à un site Web qui est cliquable mais cache le lien lorsque je navigue sur un site Web qui ne prend pas en charge le contact.

Je pourrais utiliser Modernizr pour le configurer, bien que. Je ne sais pas comment.

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

Je ne faisais que traiter de ce problème, cherchant des solutions, et j'ai trouvé ce fil (et quelques autres). Je dois avouer que je ne pouvais en obtenir aucun pour fonctionner correctement. Je suis sûr que je faisais quelque chose de mal, MAIS j'ai réussi à tricher.

Comme d'autres l'ont fait remarquer, modifier la CSS pour masquer l'indication de lien visible (color, text-decoration, cursor) est la première étape, la plus simple. La triche consiste à définir une variable title pour le lien tel.

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

En faisant cela, non seulement l'indicateur visible d'un lien est masqué (via CSS - voir des exemples d'autres personnes), mais si quelqu'un survole le lien, le titre apparaît et dit "CLIQUEZ POUR COMPARER - Mobile uniquement". De cette façon, non seulement l'expérience utilisateur est meilleure, mais votre client ne vous accuse pas d'avoir un lien brisé!

9
John T

Pourriez-vous avoir le code deux fois? c'est à dire...

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

Ensuite, il suffit d'afficher: none; sur la classe appropriée en fonction de la taille de votre navigateur?

32
Jamie Cottrell

J'ai eu récemment le même problème. Ce problème est partout sur stackoverflow et partout ailleurs. Comment cachez-vous le préfixe 'tel:' et l'empêchez-vous de exploser dans les navigateurs classiques? Il n'y a pas de bonne réponse unique.

J'ai fini par le faire de cette façon:

d'abord, j'utilise metalanguage pour filtrer le navigateur par rapport au mobile (comme php/coldfusion/Perl) en fonction de la chaîne useragent:

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

cela me donne une condition if/else pour le navigateur de bureau vs téléphone.

Ensuite, mon tag href ressemble à ceci: <a class="tel" id='tel:8005551212' href=''>800-555-1212</a>

Utilisez CSS pour styliser la classe .tel dans la feuille de style du bureau afin qu'elle ne ressemble pas à un lien vers les navigateurs du bureau. le numéro de téléphone peut toujours être cliqué mais ce n'est pas évident, et il ne fera rien:

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

Enfin, je fais un peu d’interrogation sur les liens mobiles. JQuery obtient l'ID de la classe a.tel et l'insère dans la propriété href, ce qui la rend accessible aux utilisateurs de téléphones.

Le tout ressemble à ceci:

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

Une mise en garde à cette approche: les identifiants devraient être uniques. Si vous souhaitez créer un lien vers des numéros de téléphone en double sur une page, remplacez l'identifiant par nom, puis utilisez jQuery pour les parcourir en boucle.

7
Alan

Pour moi, la méthode la plus simple, mais la plus simple, sans nouvelle classe/configuration est 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 va juste comme ceci:

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

Cela fonctionne pour les navigateurs modernes & IE 11+. Si vous devez inclure 8 <IE <11, ajoutez ce qui suit à votre javascript, car les événements de pointeur ne fonctionnent pas dans 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: j'ai trouvé une autre réponse sur un autre fil, cela pourrait vous être utile - SO - Réponse

4
Tom Siwik

Vous pouvez utiliser des requêtes de média css pour contrôler quand et non le lien.

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

tout en dessous de 768px fonctionnera comme un lien, au-dessus de cela, tout comme un texte.

3
Srijay

si vous vouliez simplement désactiver le clic sur les écrans du mobile:

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

J'espère que cela t'aides :)

2
Gaurav Mehra

J'ai eu du succès avec cela en utilisant Modernizr, en particulier le test touch. Ce n'est pas une solution parfaite dans la mesure où il ne fait rien pour aider les tablettes ou les ordinateurs portables tactiles, mais cela fonctionne dans la plupart des situations de navigation sur les postes de travail.

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

Le CSS ci-dessus cible les liens avec class="call-us" sur des appareils non tactiles qui couvrent la majorité des ordinateurs de bureau.

Notez que pointer-events est pris en charge par tous les navigateurs modernes, mais IE ne le prend en charge que dans les versions 11+. Voir le tableau compatibilité .

Une autre solution, encore imparfaite, consisterait à utiliser Modernizr.mq avec Modernizr.touch pour détecter la largeur de l'écran et la capacité tactile, puis injecter le lien téléphonique avec jQuery. Cette solution garde le lien téléphonique en dehors du code source et n'apparaît alors que sur les périphériques tactiles d'une largeur inférieure à une certaine largeur (par exemple, 720px qui couvrira probablement la plupart des téléphones mais exclut la plupart des tablettes).

En fin de compte, c’est aux éditeurs de navigateurs de proposer une solution à toute épreuve.

2
Chad Evans

Je pensais juste que j'ajouterais mes deux centimes à la discussion (qui s'avère être plutôt longue).

J'utilise essentiellement l'événement onClick (sur le lien) pour exécuter Javascript et renvoyer une valeur booléenne true ou false. Si la valeur de retour est true, c’est-à-dire qu’une variable ou une fonction qui teste si le téléphone est un téléphone renvoie une valeur true, l’URL href est suivie par le navigateur. Si la valeur de retour est false, l'URL href devient alors inactive. (Comportement HTML standard, bien avant HTML5.) 

Voici ce que je veux dire: -

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

Notez que j'ai également ajouté un peu de reformatage du lien pour le faire apparaître à l'utilisateur comme s'il ne s'agissait que d'un texte ordinaire.

Voici un Gist que j'ai créé.

Juste pour terminer ce message/réponse, le crédit pour l'écriture succincte de code JavaScipt pour la détection d'un téléphone (basé sur l'agent utilisateur et l'événement ontouchstart) va à un collègue Melbournian rgb dans ce stackoverflow post

2
TattyFromMelbourne

il semble que cela pourrait être fait avec une simple requête multimédia pour la plupart des navigateurs. Quelque chose comme ça fonctionne comme un charme pour moi:

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

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

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

et sur le lien du bureau, laissez de côté le "href", sur le lien du mobile, mettez le "href".

2
rod122

J'ai trouvé le meilleur moyen. Je comprends que c'est vieux, mais j'ai trouvé un moyen très facile de faire cela.

En utilisant ce code ci-dessous

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

Dans votre CSS, utilisez les requêtes multimédia . Faites donc une requête multimédia pour tous les bureaux.

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

Désormais, toutes les pages de la taille d'un bureau ne pourront pas cliquer dessus.

2
user2990336

Vous pouvez utiliser les requêtes multimédia css3 pour détecter une fenêtre mobile et masquer le lien en conséquence.

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

Sinon, si vous souhaitez afficher le lien et simplement désactiver la fonctionnalité de clic, utilisez la fonction jquery:

screen.width

ou

screen.innerWidth

et désactivez la fonctionnalité de clic sur le lien à l'aide de

 $('.your-link').off(click);
1
Humairah Mujawar

Voici une solution simple basée sur jQuery que j'ai développée pour résoudre ce problème. Voir les commentaires de code pour l'explication . 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);
  }
});
1
Eric Seastrand

Merci au post de TattyFromMelbourne, j'utilise maintenant un bit assez simple:

Mon bouton id = "call" effectuera l'appel sur la base de sa fonction de test "Probablementphone", mais fera également défiler la section des informations de contact dans un sens ou dans l'autre, ce qui donnera au bouton une utilisation efficace, quoi qu'il arrive.

J'ai également remplacé l'alerte par une fonction vide, pour supprimer la fenêtre contextuelle.

<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>
1
bill c

J'ajoute le css suivant via javascript lorsqu'un périphérique mobile est détecté.

pointer-events:none

Le code js est:

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

Saisissez ceci dans un css personnalisé et appelez-le un jour:

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

Changez de couleur au besoin.

À votre santé!

0
Dr Duh

Mon approche est semblable à une autre approche ci-dessus; Je tiens compte de quelques considérations:

  • Comme nous le savons, il n’existe aucune méthode programmatique efficace pour détecter un soutien. Il s'agit d'un cas rare où nous sommes obligés d'analyser la chaîne UserAgent.
  • Cela devrait être côté client; il n'y a pas besoin de détection côté serveur.
  • Il existe maintenant des navigateurs de bureau pouvant gérer des liens tel:; Au pire, le comportement de Chrome sur le bureau est de ne rien faire lorsqu'on clique dessus. Au mieux, vous pouvez passer un appel avec Google Voice.
  • Parce que le comportement de secours de Chrome est de ne rien faire, nous devrions utiliser ce comportement comme secours de tous les navigateurs.
  • Si votre page assume la responsabilité de la création de liens tel:, elle doit également assumer la responsabilité de tous les liens tel: et désactiver la détection automatique dans le navigateur.

Dans cet esprit, je suggère d’abord d’ajouter une balise meta à votre <head>:

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

Ensuite, définissez une fonction JavaScript qui analyse le UserAgent et renvoie true si et seulement si nous pensons que le navigateur va pas nous amener à une page d’erreur lorsque le lien est cliqué:

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

Ensuite, appelez cette fonction à partir de l'attribut onclick de votre lien:

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

Cela permettra aux liens tel: d'être cliqués sur Chrome, Edge, Safari iOS, Navigateur Android, Blackberry, Dorothy, Firefox Mobile, IE Mobile, Opera Mini, Opera Mobile et webOS. Les liens ne feront rien lorsque l'utilisateur clique sur d'autres appareils ou navigateurs.

Veuillez utiliser le format international pour vos liens tel:. En d'autres termes, les premiers caractères doivent être un + et un code de pays.

0
Adam Leggett

Cette méthode fonctionne sans ajouter de CSS.

Essayez de remplacer la balise a par quelque chose d'autre comme une balise span, mais uniquement pour les navigateurs mobiles. Les avantages sont que vous ne dissimulez pas cette a avec CSS empêchant l'action par défaut tout en le maintenant comme un lien. Ce ne sera plus a, vous n'aurez donc pas à vous inquiéter.

J'ai créé un exemple pour ici . Le téléphone en gras fonctionne de cette façon, voir le code ci-dessous.

J'ai pris un morceau de code de l'un des répondants pour définir si le navigateur est mobile. Et vous devez marquer ces liens avec class="tel" ou trouver un moyen de déterminer si la href contient "tel:". JQuery est également requis.

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