Simplest way to detect keypresses in javascript

Question

I have an idea for a game in javascript  I m going to make it with EaselJS  and I ll have to detect keypresses  After looking around on the internet I ve seen a lot of suggestions  use window onkeypress  use jQuery  etc   but for almost every option there s a counterargument  What do you guys suggest  Using jQuery for this sounds easy enough but I have virtually no experience with that library  and I m not particulary a veteran at javascript either  so I d rather avoid it  If jQuery is the best option  can someone give a good example  with explanation would be awesome  of how to do this   I guess this gets asked a lot but I couldn t find any clear answers  Thanks in advance

User · Answer

Use event key and modern JS  No number codes anymore  You can use  quot Enter quot    quot ArrowLeft quot    quot r quot   or any key name directly  making your code far more readable   NOTE  The old alternatives   keyCode and  which  are Deprecated   document addEventListener  quot keypress quot   function onEvent event        if  event key      quot ArrowLeft quot                Move Left           else if  event key      quot Enter quot                Open Menu               Mozilla Docs Supported Browsers

User · Answer

With plain Javascript  the simplest is   document onkeypress   function  e        e   e    window event         use e keyCode      But with this  you can only bind one handler for the event   In addition  you could use the following to be able to potentially bind multiple handlers to the same event   addEvent document   keypress   function  e        e   e    window event         use e keyCode      function addEvent element  eventName  callback        if  element addEventListener            element addEventListener eventName  callback  false         else if  element attachEvent            element attachEvent  on    eventName  callback         else           element  on    eventName    callback            In either case  keyCode isn t consistent across browsers  so there s more to check for and figure out  Notice the e   e    window event - that s a normal problem with Internet Explorer  putting the event in window event instead of passing it to the callback   References    https   developer mozilla org en-US docs DOM Mozilla event reference keypress https   developer mozilla org en-US docs DOM EventTarget addEventListener   With jQuery     document  on  keypress   function  e           use e which       Reference    http   api jquery com on    Other than jQuery being a  large  library  jQuery really helps with inconsistencies between browsers  especially with window events   and that can t be denied  Hopefully it s obvious that the jQuery code I provided for your example is much more elegant and shorter  yet accomplishes what you want in a consistent way  You should be able to trust that e  the event  and e which  the key code  for knowing which key was pressed  are accurate  In plain Javascript  it s a little harder to know unless you do everything that the jQuery library internally does   Note there is a keydown event  that is different than keypress  You can learn more about them here  onKeyPress Vs  onKeyUp and onKeyDown  As for suggesting what to use  I would definitely suggest using jQuery if you re up for learning the framework  At the same time  I would say that you should learn Javascript s syntax  methods  features  and how to interact with the DOM  Once you understand how it works and what s happening  you should be more comfortable working with jQuery  To me  jQuery makes things more consistent and is more concise  In the end  it s Javascript  and wraps the language   Another example of jQuery being very useful is with AJAX  Browsers are inconsistent with how AJAX requests are handled  so jQuery abstracts that so you don t have to worry   Here s something that might help decide    http   www jscripters com jquery-disadvantages-and-advantages

User · Answer

There are a few ways to handle that  Vanilla JavaScript can do it quite nicely   function code e        e   e    window event      return e keyCode    e which     window onload   function        document onkeypress   function e           var key   code e              do something with key             Or a more structured way of handling it    function d       var modern    d addEventListener   event   function obj  evt  fn           if modern                obj addEventListener evt  fn  false             else               obj attachEvent  on    evt  fn                    code   function e           e   e    window event          return e keyCode    e which          init   function            event d   keypress   function e               var key   code e                  do stuff with key here                        if modern            d addEventListener  DOMContentLoaded   init  false         else           d attachEvent  onreadystatechange   function                if d readyState      complete                     init                                       document

User · Answer

Don t over complicate     document addEventListener  keydown   logKey       function logKey e          if     e code       ArrowRight               code here                   if     e code       ArrowLeft               code here                   if     e code       ArrowDown               code here                   if     e code       ArrowUp               code here

User · Answer

KEYPRESS  enter key  Click inside the snippet and press Enter key  Vanilla  x000D   x000D  document addEventListener  keypress   function event      if  event keyCode    13        alert  hi             x000D   x000D   x000D   Vanilla shorthand  ES6   x000D   x000D  this addEventListener  keypress   event   gt      if  event keyCode    13        alert  hi           x000D   x000D   x000D   jQuery  x000D   x000D    this  on  keypress   function event      if  event keyCode    13        alert  hi           x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D   jQuery classic  x000D   x000D    this  keypress function event      if  event keyCode    13        alert  hi           x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D   jQuery shorthand  ES6   x000D   x000D    this  keypress  e    gt      if  e keyCode    13      alert  hi       x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D   Even shorter  ES6   x000D   x000D    this  keypress e  gt    e which  13    alert hi   null   x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D   Due some requests  here an explanation  I rewrote this answer as things have become deprecated over time so I updated it  I used this to focus on the window scope inside the results when document is ready and for the sake of brevity but it s not necessary  Deprecated  The  which and  keyCode methods are actually considered deprecated so I would recommend  code but I personally still use keyCode as the performance is much faster and only that counts for me  The jQuery classic version  keypress   is not officially deprecated as some people say but they are no more preferred like  on  keypress   as it has a lot more functionality live state  multiple handlers  etc    The  keypress  event in the Vanilla version is also deprecated  People should prefer beforeinput or keydown today   Note  It has nothing to do with jQuery s events  they are called the same but execute differently   All examples above are no biggies regarding deprecated or not  Consoles or any browser should be able to notify you with that if this happens  And if this ever does in future  just fix it  Readablity  Despite the ease making it too short and snippy isn t always good either  If you work in a team  your code must be readable and detailed  I recommend the jQuery version  on  keypress    this is the way to go and understandable by most people  Performance  I always follow my phrase Performance over Effectiveness as anything can be more effective if there is the option but it just should function and execute only what I want  the faster the better  This is why I prefer  keyCode even if it s considered deprecated in most cases   It s all up to you though  Performance Test

[javascript] Simplest way to detect keypresses in javascript

Use `event.key` and modern JS!

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to keyboard

Examples related to easeljs