Javascript event triggered by pressing space

Question

I am trying to get an event to trigger when I am on a page and press space, but I can't figure it out. Currently I am trying to use jQuery to accomplish a satisfying result.

I have tried using keydown, keyup and keypress, but it seems that you can only use it if you are actually inputting something to a form or field.

What I want is to trigger an alert when space is pressed.

Posting some relevant code that you have already would be helpful. — Anthony Grist, Jun 01 '11 at 09:34

Félix Saparelli · Accepted Answer · 2018-03-05T23:49:04.663

53

These events bubble up, so if you're trying to trigger the event wherever your focus is (ie. not in an input), just bind a handler on window:

$(window).keypress(function (e) {
  if (e.key === ' ' || e.key === 'Spacebar') {
    // ' ' is standard, 'Spacebar' was used by IE9 and Firefox < 37
    e.preventDefault()
    console.log('Space pressed')
  }
})

Also see the list of all .key values.

edited Mar 05 '18 at 23:49

answered Jun 01 '11 at 09:45

Félix Saparelli

8,424
6
52
67

1

On Firefox, this intercepted Ctrl+J, so I changed the first condition to `e.charCode === 32`. – Noumenon Feb 10 '16 at 17:24
From the answer right below: "`0` works in mozilla and `32` in other browsers". This is probably not relevant anymore, but you should be using the modern [.key](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key) instead anyway. – Félix Saparelli Mar 05 '18 at 23:45
Works with `e.key === ' '` in Chrome, Firefox and Safari – Chaki_Black Aug 12 '21 at 06:33

score 8 · Answer 2 · edited Oct 07 '17 at 14:36

8

Try this:

$('input:text').keypress(function(e) {
    if (e.keyCode == 0 || e.keyCode == 32) // `0` works in mozilla and `32` in other browsers
       console.log('space pressed');
});

edited Oct 07 '17 at 14:36

Patrick Hund

19,163
11
66
95

answered Jun 01 '11 at 09:39

thecodeparadox

86,271
21
138
164

1

Op said without using any `input` – xkeshav Jun 01 '11 at 09:44

score 5 · Answer 3 · answered Apr 16 '15 at 06:08

This code can be used:

$(window).keypress(function(e) {
  if (e.keyCode == 0 || e.keyCode == 32) {
    console.log('Space pressed');
  }
});

Explaination:
The $(window).keypress(function(e) waits for the user to press any key and stores the data of the key pressed in the argument 'e'.
Then if (e.keyCode == 0 || e.keyCode == 32) checks if the code of the key pressed is equal to the code of spacebar, that is 0 or 32. If this returns false then any other key is pressed and the code ends.

Some commonly used keycodes:

backspace:8
tab:9
enter:13
shift:16
ctrl:17
alt:18
caps lock:20
escape:27
(space):32
0-9:48-57
a-z:65-90
numpad0-numpad9:96-105

score 5 · Answer 4 · answered Jun 01 '11 at 09:47

Try to bind your key event listener to the jQuery $(document) object;

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $(document).keydown(function(e) {
          if (e.keyCode == '32') {
            alert('space');
          }
        });
      });
    </script>
  </head>
  <body>
  </body>
</html>

Javascript event triggered by pressing space

4 Answers4

Linked