Capture key press without placing an input element on the page

Question

How to capture key press  e g   Ctrl Z  without placing an input element on the page in JavaScript  Seems that in IE  keypress and keyup events can only be bound to input elements  input boxes  textareas  etc

User · Answer

Code  amp  detects ctrl z  document onkeyup   function e      if e ctrlKey  amp  amp  e keyCode    90           ctrl z pressed

User · Answer

jQuery also has an excellent implementation that s incredibly easy to use   Here s how you could implement this functionality across browsers     document  keypress function e       var checkWebkitandIE  e which  26   1   0       var checkMoz  e which  122  amp  amp  e ctrlKey   1   0        if  checkWebkitandIE    checkMoz     body   append   lt p gt ctrl z detected  lt  p gt           Tested in IE7 Firefox 3 6 3  amp  Chrome 4 1 249 1064  Another way of doing this is to use the keydown event and track the event keyCode   However  since jQuery normalizes keyCode and charCode using event which  their spec recommends using event which in a variety of situations     document  keydown function e   if  e keyCode  90  amp  amp  e ctrlKey         body   append   lt p gt ctrl z detected  lt  p gt

User · Answer

Detect key press  including key combinations   window addEventListener  keydown   function  e      if  e ctrlKey  amp  amp  e keyCode    90           Ctrl   z pressed           Benefit here is that you are not overwriting any global properties  but instead merely introducing a side effect  Not good  but definitely a whole lot less nefarious than other suggestions on here

User · Answer

For modern JS  use event key  document addEventListener  quot keypress quot   function onPress event        if  event key      quot z quot   amp  amp  event ctrlKey               Do something awesome             NOTE  The old properties   keyCode and  which  are Deprecated   Mozilla Docs Supported Browsers

User · Answer

For non-printable keys such as arrow keys and shortcut keys such as Ctrl-z  Ctrl-x  Ctrl-c that may trigger some action in the browser  for instance  inside editable documents or elements   you may not get a keypress event in all browsers  For this reason you have to use keydown instead  if you re interested in suppressing the browser s default action  If not  keyup will do just as well   Attaching a keydown event to document works in all the major browsers   document onkeydown   function evt        evt   evt    window event      if  evt ctrlKey  amp  amp  evt keyCode    90            alert  Ctrl-Z               For a complete reference  I strongly recommend Jan Wolter s article on JavaScript key handling

[javascript] Capture key press without placing an input element on the page?

Examples related to javascript