CODEWITHSUNDEEP
javascripthtml
TKoL
TKoL

Reputation: 13912

What elements have their own keypress handlings?

I have a bit of code that starts with this:

 document.addEventListener('keyup',
                function (e) {
                    // I DO NOT WANT TO HANDLE INPUT FROM THESE
                    if (["INPUT", "SELECT", "TEXTAREA"].includes(e.target.tagName)) return;
                    //... do stuff with keypresses here
                });

This of course watches for the keyup event on the entire document, to fire special events when the enter key is pressed -- I use this for barcode scanning mostly, as my barcode scanner is set to input keys and then press ENTER.

So I've set it up so that it DOESN'T fire my special events when keys are pressed while focused in INPUT, SELECT, and TEXTAREA elements, because generally I'll want those to be handled in their own way.

Are there any other html elements that I should be aware of, that handle key events in their own way?

Upvotes: 2

Views: 37

Answers (1)

Christian Vincenzo Traina
Christian Vincenzo Traina

Reputation: 10454

What you are looking for is the list of focusable elements:

  • HTMLInputElement
  • HTMLSelectElement
  • HTMLTextAreaElement
  • HTMLAnchorElement
  • HTMLButtonElement
  • HTMLAreaElement

Note that Button and Anchor can only listen to enter keypress, so you might not need this exception

Upvotes: 1

Related Questions