web-dev-qa-db-fra.com

Suivre l'utilisation de "Ctrl + F" par les visiteurs sur un site Web?

Serait-il théoriquement possible de détecter (par exemple via JavaScript) si un utilisateur interroge une page Web à l'aide du raccourci Windows Ctrl + F, ou l'équivalent Mac Command + F dans leur navigateur?

La première étape consisterait à détecter si cette fonction était appelée, mais ce serait un jeu de balle différent de suivre leurs frappes au clavier ...


Je pose la question parce que très souvent, les applications Web semblent recâbler les raccourcis clavier pour faire autre chose (ou ils sont complètement désactivés, par exemple, dans certains cas de HTML5 canvas, le raccourci Command + W fermer l'onglet ne fonctionne pas). C'est probablement un mécanisme différent et je n'ai pas beaucoup d'espoir. En outre, seulement environ 10% des utilisateurs savent utiliser le Ctrl + F fonctionner de toute façon.

seotrackinganalyticsclick-tracking
7
Baumr

Si vous voulez capturer le clavier de l'événement Ctrl + F et continuez avec l'ouverture de la boîte de recherche standard du navigateur, vous pouvez le faire:

var KEY_CTRL = 17;
var KEY_f = 70;

var isReserved = false;
var useExclusiveKeyEvent = false;
var isNewSearchEvent = false;


/*THIS VARIABLE IS RENDERED BY SERVER SIDE*/
var clientRandomKey = "78349DE472AA30032DE2DF344FF28374";

window.onkeyup=function(ev){
  if(ev.which == KEY_CTRL){
    isReserved=false;
  }
}
window.onkeydown=function(ev){
  //!IMPORTANT NOT MAKE UI DELAY IN THIS FUCTION
  if(ev.which == KEY_CTRL) {
       isReserved=true;
  }
    if((isReserved==true)&&(ev.which == KEY_f)) {       
    var currentDate = new Date();
    console.log( "INTO EVENT FUNCTION >\n   "+ currentDate+ " \n   ID: "+clientRandomKey+"\n   launch search a Word");
    isNewSearchEvent=true;
    if(useExclusiveKeyEvent){
      return false;}
    }
}

window.setInterval(function(){            
    if(isNewSearchEvent){
      isNewSearchEvent=false;
      //TODO ajax send code
      var currentDate = new Date();
      var msg = "OUTSIDE EVENT FUNCTION >\n   " + currentDate+ " \n   ID: "+clientRandomKey+"\n   launch search a Word"
      console.log(msg);
      alert(msg);
    }
},2500);

Ceci est un exemple vivant .

Comme vous pouvez le voir dans l'exemple, lorsque l'utilisateur appuie sur la combinaison de touches droite, la fonction événement envoie un "log string" dans la console ("EVENT INTO FUNCTION") tout en modifiant l'état d'un indicateur (isNewSearchEvent ).

Cet indicateur est évalué dans une minuterie pour envoyer un autre "log string" dans la console ("FONCTION DE L'EVENEMENT")

et ouvrez une alerte avec le même message.

log console

Ce double passage est nécessaire car il est impossible de créer des ruptures dans la fonction événement, qui doivent être écoutées à une vitesse de capture correcte.

3
RTOSkit

Oui c'est possible:

$(document).ready(function(){
  ctrl = false;
  document.addEventListener("keydown", function(e){
    if(e.which == 17){
      ctrl = true;
    }
    if(e.which == 70 && ctrl == true){
      e.preventDefault();

    }
  }, true);

  document.addEventListener("keyup", function(e){
    if(e.which == 17){
      ctrl = false;

    }
  });
});

Et avec .preventDefault() nous annulons l’événement habituel. Mais pour la clé de commande, je ne sais pas ce que c'est. Certains disent que c'est e.metaKey si vous utilisez jQuery, car le problème est que la clé de commande n'a pas le même code de clé JavaScript sur chaque navigateur. vous devez donc le gérer manuellement, sinon jQuery peut vous aider.

Si vous voulez le tester http://jsfiddle.net/a5t2q/

EDIT: Vous devez cliquer sur la section "Résultat" pour voir que Ctrl + F est bloqué, car cette section est celle qui est appelée "document" dans ce cas.

4
user1455261