Tell me more ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.
up vote 4 down vote favorite
2

Would it theoretically be possible to detect (e.g. via JavaScript) if a user queries a webpage with the Windows shortcut Ctrl + F, or the Mac-equivalent Command + F in their browser?

The first step would be to detect whether that function was called, but it'd be a different ball game to track their keystrokes...


I'm asking because a lot of the time, web apps seem to re-wire keyboard shortcuts to do other things (or they get disabled completely, for example, in some cases of HTML5 canvas, the shortcut Command + W to close the tab doesn't work). This is likely a different mechanism, and I don't have high hopes. Furthermore, only about 10% of users know how to use the Ctrl + F function anyway.

share|improve this question
"only 10%" - flabbergasted! – w3d Jan 7 at 9:47
@w3d, what are you saying? – Baumr Jan 13 at 0:37
Just expressing my surprise that "only about 10% of users [reportedly] know how to use Ctrl+F". (flabbergasted - "As if struck dumb with astonishment and surprise") – w3d Jan 13 at 9:28
No sarcasm intended? ;) – Baumr Jan 13 at 13:58
   
I wasn't intending sarcasm, although admittedly I do find that statistic rather hard to swallow! :) – w3d Jan 13 at 23:24

2 Answers

up vote 3 down vote accepted

If you want capture the event keyboard Ctrl + F and continue with the opening of the standard searchbox of the browser, you could do this:

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

This is a live example.

As you can see in the example, when the user presses the right keyboard combination, event function sends a "log string" in the console ("EVENT INTO FUNCTION"), while changing the state of a flag(isNewSearchEvent).

This flag is evaluated in a timer to send another "log string" in the console ("OUTSIDE EVENT FUNCTION")

and open an alert with the same message.

log console

This double passage is necessary because cannot create breaks into the event function, that should listen in a correct speed of capture.

share|improve this answer
Perfect, thanks! Very interesting. So after this, would it be possible to track keystrokes? – Baumr Jan 7 at 10:18
Sure,is a correct interpretation of the real possibilities – RTOSkit Jan 7 at 10:29
up vote 4 down vote

Yes it's 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;

    }
  });
});

And with .preventDefault() we cancel the regular event. But for the Command key Im not sure what it is, some says that its e.metaKey if you are using jQuery, because the problem is that the Command key don't have the same javascript key code on each browser, so you must handle it manualy or jQuery can help you.

If you want to test it http://jsfiddle.net/a5t2q/

EDIT : You must click on the "Result" section to see that Ctrl+F is blocked, because that section is the one referred as "document" in this case

share|improve this answer
2  
Wow man, post this in the exact same time. +1 for jquery soluction. good work! – RTOSkit Jan 7 at 4:33

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.