I was wondering if you can trigger a javacript keypress event but not within an input out textarea tag?

What I want to a achieve is when the user presses any key anywhere on the page an alert shows up saying : You pressed a key.

Here's my code :

function pushbtn(event){
var x = event.keyCode;
alert("You pressed"+x)
}

I'm not sure want event listener to use or where I should put it.

I was wondering if you can trigger a javacript keypress event but not within an input out textarea tag?

What I want to a achieve is when the user presses any key anywhere on the page an alert shows up saying : You pressed a key.

Here's my code : http://codepen.io/willydev/pen/LkZAob

function pushbtn(event){
var x = event.keyCode;
alert("You pressed"+x)
}

I'm not sure want event listener to use or where I should put it.

• javascript
• events
• keypress

4 Answers 4

Of course you can, simply delegate the keypress event-handler to the document:

function pushbtn(event) {

  // retrieving the keyCode of the pressed key:
  var keycode = event.keyCode,

  // finding which letter was generated, using
  // String.fromCharCode():
    key = String.fromCharCode(keycode);
  console.log('You pressed ' + key + ' (keyCode: ' + keycode + ').');
}

document.addEventListener('keypress', pushbtn);

body,
html {
  height: 100vh;
  width: 100vw;
  margin: 0;
  background-color: #f00;
}

If you wish to exclude those keypress events triggered within <input> or <textarea> elements:

function pushbtn(event) {
  var keycode = event.keyCode,
    key = String.fromCharCode(keycode),

    // finding the element on which the event
    // was originally fired:
    source = event.target,

    // an Array of element-types upon which
    // the function should not fire (to prevent
    // interfering needlessly with the UI and
    // user-expectations):
    exclude = ['input', 'textarea'];

  // finding the element-type (tagName) of the element
  // upon which the event was fired, converting it to
  // a lower-case string and then looking in the Array
  // of excluded elements to see if the element is held
  // within (-1 indicates the string was not found within
  // the Array):
  if (exclude.indexOf(source.tagName.toLowerCase()) === -1) {
    console.log('You pressed ' + key + ' (keyCode: ' + keycode + ').');
  }
  return;
}

document.addEventListener('keypress', pushbtn);

body,
html {
  height: 100vh;
  width: 100vw;
  margin: 0;
  background-color: #f00;
}
input,
textarea {
  display: block;
  width: 30%;
  box-sizing: border-box;
  margin: 0.5em 0 0 1em;
}

<input />
<textarea></textarea>

Maybe:

document.onkeypress = function(event){

if(event.keyCode == 32){
document.write("Space key pressed");
};

};

Of course you can change the keyCode depending on the key you need, or delete the entire keyCode section if you don't care which key is pressed.

Hope it helps ;)

You can do this by adding the event-listener on document.

    function pushbtn (event){
      var x = event.charCode; //not keyCode
      alert("You pressed"+x);
    }

    //adding event listner on document
    document.addEventListener('keypress', pushbtn); 

Use charCode instead of keyCode but still keyCode will give you the keycode of the key(number) Use key it is perfect for your case. Code will look like this

    function pushbtn (event){
      var x = event.key;
      alert("You pressed :"+x);
    }

    //adding event listner on document
    document.addEventListener('keypress', pushbtn); 

Add the whole document as your event target and then attach it to either a JavaScript or jQuery keypress event listener.

$(document).keypress(function() {
   alert("You pressed a key!");
});