How do I capture a key press (or keydown) event on a div element?

by

(1) Set the tabindex attribute:

<div id="mydiv" tabindex="0" />

(2) Bind to keydown:

 $('#mydiv').on('keydown', function(event) {
    //console.log(event.keyCode);
    switch(event.keyCode){
       //....your actions for the keys .....
    }
 });

To set the focus on start:

$(function() {
   $('#mydiv').focus();
});

To remove – if you don’t like it – the div focus border, set outline: none in the CSS.

See the table of keycodes for more keyCode possibilities.

All of the code assuming you use jQuery.

#

More Related Contents:

  1. Capture key press (or keydown) event on DIV element
  2. Get one element title and add this to another div in jquery
  3. Get the longest text in HTML document using Jquery or javascript
  4. Hide/Show image on one click [closed]
  5. jQuery Mobile: document ready vs. page events
  6. jQuery Mobile: Markup Enhancement of dynamically added content
  7. How to move an element into another element?
  8. How to prevent a click on a ‘#’ link from jumping to top of page?
  9. How to calculate the XPath position of an element using Javascript?
  10. How to disable scroll without hiding it?
  11. jQuery: Get selected element tag name
  12. Attach an event in a child iframe to a handler in the parent window
  13. jQuery click anywhere in the page except on 1 div
  14. HTML anchor link – href and onclick both?
  15. document.getElementsByClassName().innerHTML always returns “undefined”
  16. jquery select option click handler
  17. jQuery jump or scroll to certain position, div or target on the page from button onclick [duplicate]
  18. JavaScript Loading Screen while page loads
  19. jQuery support “:invalid” selector
  20. combo box is getting vanished when an alert is coming
  21. Change text color based on brightness of the covered background area?
  22. jQuery – Sticky header that shrinks when scrolling down
  23. jQuery text() and newlines
  24. Trigger a button click inside an iframe [duplicate]
  25. submit event does not fire if submit initiated programmatically
  26. Remove scrollbar but not scrolling functionality [duplicate]
  27. How can I remove wrapper (parent element) without removing the child?
  28. Changing cursor to waiting in javascript/jquery
  29. Returning value from confirmation dialog using JQuery UI dialog
  30. How can I calculate the difference between two times that are in 24 hour format?

Leave a Comment