Question

I’m trying to setup some simple page navigation with keyups in jQuery. For instance, if the user presses the left arrow key, I want the page to load something.

Everything works except the user must first click the browser window for the key event to register.

Here’s the code I’m using:

$(document).ready(function() {
  $(document.documentElement).live("keyup", function(event) {
      if (event.keyCode == 37) {//left arrow
        //do something here
      }
  });
});

It seems like a focus issue, but I’ve read that using document.documentElement means I don’t have to focus on anything in particular.

It works if the user clicks once on the page and then hits their left arrow. But if they load the page and hit the left arrow without clicking it doesn’t fire.

Any way to fix this?

Answer 1

Your page does not have focus on it that is why you need to click on the page. Set focus on some control then it will work. live is not cause any trouble in this case but start using on instead as live is depreacted.

I set the focus by state $('#txt1').focus(); Comment this statement and you will notice you will have to click the page to get keyup event.

Live Demo

$(document).ready(function() {
  $('#txt1').focus();  //This is the statement that puts focus on page
  $(document.documentElement).live("keyup", function(event) {


      if (event.keyCode == 37) {//left arrow
        //do something here
          alert("");
      }
  });
});​