CODEWITHSUNDEEP
javascripteventskeypress
Willy Mercier
Willy Mercier

Reputation: 217

Is it possible to trigger a javascript keypress event not in an input or textarea tag?

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.

Upvotes: 8

Views: 3566

Answers (4)

Papi
Papi

Reputation: 1

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!");
});

Upvotes: 0

kgsnaidu
kgsnaidu

Reputation: 374

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

Upvotes: 1

Zinger
Zinger

Reputation: 443

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

Upvotes: 1

David Thomas
David Thomas

Reputation: 253318

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>

Upvotes: 10

Related Questions