keycode and charcode

by

Handling key events consistently is not at all easy.

Firstly, there are two different types of codes: keyboard codes (a number representing the key on the keyboard the user pressed) and character codes (a number representing a Unicode character). You can only reliably get character codes in the keypress event. Do not try to get character codes for keyup and keydown events.

Secondly, you get different sets of values in a keypress event to what you get in a keyup or keydown event.

I recommend this page as a useful resource. As a summary:

If you’re interested in detecting a user typing a character, use the keypress event. IE bizarrely only stores the character code in keyCode while all other browsers store it in which. Some (but not all) browsers also store it in charCode and/or keyCode. An example keypress handler:

function(evt) {
  evt = evt || window.event;
  var charCode = evt.which || evt.keyCode;
  var charStr = String.fromCharCode(charCode);
  alert(charStr);
}

If you’re interested in detecting a non-printable key (such as a cursor key), use the keydown event. Here keyCode is always the property to use. Note that keyup events have the same properties.

function(evt) {
  evt = evt || window.event;
  var keyCode = evt.keyCode;

  // Check for left arrow key
  if (keyCode == 37) {
    alert("Left arrow");
  }
}

More Related Contents:

  1. How can I upload files asynchronously with jQuery?
  2. Why does my JavaScript code receive a “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” error, while Postman does not?
  3. Stop form refreshing page on submit
  4. Variable doesn’t get returned from AJAX function
  5. navigator.geolocation.getCurrentPosition sometimes works sometimes doesn’t
  6. Detect IF hovering over element with jQuery
  7. TypeError: p.easing[this.easing] is not a function
  8. Rails 5: how to use $(document).ready() with turbo-links
  9. Why can’t we have return in the ternary operator?
  10. Throttle event calls in jQuery
  11. Filter strings in Array based on content (filter search value)
  12. jQuery get the location of an element relative to window
  13. What is the difference between jQuery’s mouseout() and mouseleave()?
  14. Test if links are external with jQuery / javascript?
  15. How to select a range of elements in jQuery
  16. Change iframe src by clicking a link
  17. How to generate a thumbnail image after adding an image inside an input type=”file” in a form and submitting them both on the same form
  18. Can you have a JavaScript hook trigger after a DOM element’s style object changes?
  19. Proper way to reset a GIF animation with display:none on Chrome
  20. jQuery x y document coordinates of DOM object
  21. How do I capture a key press (or keydown) event on a div element?
  22. Clear dropdown using jQuery Select2
  23. Passing JSON data from php to html-data attribute and then to Javascript
  24. How to fire jQuery function only if form is valid
  25. Detect if dropdown navigation would go off screen and reposition it
  26. Are 301 redirects possible using javascript or jQuery?
  27. AngularJS: lazy loading controllers and content
  28. How to use jQuery UI with Angular 2
  29. Ordered JSONObject
  30. jQuery match part of class with hasClass

Leave a Comment