I'm trying to check if a key is pressed without focus on any sort of field.

The goal is to allow users to press left and right arrow to get to the next image. There is no need for them to click into any text field or anything... just simply press those keys to scroll to the next or last image.

Like:

function keyEvent(e) {
  if(e.keyCode == 39) {
    run some code to get next image
  }
  else if (e.keyCode == 37) {
    run some code to get last image
  }
 }

It seems like jquery always needs a "selector", as though I need to bind it to a field or something.

$('input[type=text]').on('keyup', function(e) {     
  if (e.which == 39) {

  run some code
} }); 

Any ideas?

EDIT:

I have this script in my viewimage.php file body... the javascript still isn't running on page load:

<script type="text/javascript">
$(document).ready(function() { 
    $(document).keydown(function (e) {
     if (e.which == 39) {
       alert("39");
    }
    });
});
</script>

Thank you

I'm trying to check if a key is pressed without focus on any sort of field.

The goal is to allow users to press left and right arrow to get to the next image. There is no need for them to click into any text field or anything... just simply press those keys to scroll to the next or last image.

Like:

function keyEvent(e) {
  if(e.keyCode == 39) {
    run some code to get next image
  }
  else if (e.keyCode == 37) {
    run some code to get last image
  }
 }

It seems like jquery always needs a "selector", as though I need to bind it to a field or something.

$('input[type=text]').on('keyup', function(e) {     
  if (e.which == 39) {

  run some code
} }); 

Any ideas?

EDIT:

I have this script in my viewimage.php file body... the javascript still isn't running on page load:

<script type="text/javascript">
$(document).ready(function() { 
    $(document).keydown(function (e) {
     if (e.which == 39) {
       alert("39");
    }
    });
});
</script>

Thank you

• php
• javascript
• jquery

• The question seems ambiguous to me. The first statement implies that you're trying to make the arrow keys move between pages without breaking text input functionality, but the code you posted below does exactly the opposite. One way or another, you have enough answers to make it work both ways. – Fabrício Matté Commented Oct 10, 2012 at 21:05

6 Answers 6

$(document).ready(function() {
    $(document).keydown(function(e) {   
      e.preventDefault();  
      if (e.which == 13) {
          // Whatever...
      }
    });
}); 

I'm trying to check if a key is pressed without focus on any sort of field.

If by field you mean input/textearea/select elements, all you have to do is attach a handler to the document and cancel the aforementioned handler if the event target is an input element:

$(document).on('keyup', function(e) {
    if ($(e.target).is('input, textarea, select')) return;
    if (e.which == 39) {
        console.log('move foward');
    }
});

Fiddle

Bind the keyup (or press or down) to the body, document, or window. Use any or all (belt+suspenders) of them.

$('body',document,window).on('keyup', function(e) {
    if (e.which == 13) {
        e.preventDefault();
        console.log('enter');
    }
});​

Add the listener to the document.

$(document).on("keyup", function (e) {
    console.log(e.keyCode);
});​

Use $(document).on() or $(window).on()

First off, keypress is safer I think. I've heard that keyup and keydown get missed in some browsers.

I got that backwards... keydown is safest.

The answer to your question is to bind the document:

$(document).on('keydown', function(){
  ...
});