How can I detect a key up / down event anywhere in an element?

Question

If I'm in a textarea, I can do something like:

    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
      e.preventDefault()      return
    }

it detects within the textarea, but I want it to bubble up to some parent element. How can I do that?

It does bubble up unless you're specifically preventing it to do so. If you're having problems receiving the event in a parent element, you'll have to show a [mcve]. — Guy Incognito, Jun 20 '20 at 13:42

doppelgunner · Answer 1 · 2020-06-20T15:16:38.010

1

You can just put an onKeyPress on a div parent element as long as the textarea is the grand child and you are not doing the event.stopPropagation()

<div onkeypress="keyPress(event)">
<textarea>sample text area</textarea>
</div>

<script>
function keyPress(event) {
  alert(event.keyCode);
}
</script>

edited Jun 20 '20 at 15:16

answered Jun 20 '20 at 13:37

doppelgunner

707
6
10

You're writing JSX btw – Guerric P Jun 20 '20 at 13:43
thanks @GuerricP for letting me know, I edited my answer – doppelgunner Jun 20 '20 at 15:16

Guerric P · Accepted Answer · 2020-06-21T19:01:06.100

An event bubbles by default unless you use e.stopPropagation():

document.getElementsByTagName('textarea')[0].addEventListener('keyup', function(e) {
    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
      e.preventDefault();
      return;
    }
});

document.getElementsByTagName('div')[0].addEventListener('keyup', function(e) {
    console.log('Bubbled');
});

<div>
  <textarea>
  </textarea>
</div>

Now if I understand you correctly, you want to prevent the default behavior on the element which has fired the event, but not on the parent elements.

In your particular use case, I guess you want to preserve the scroll behavior of the up and down arrows, but I'm afraid it's not possible for two reasons:

The defaultPrevented property of a DOM event is read only and there is no such method as restoreDefault: How to trigger an event after using event.preventDefault()
If you manually fire a new event, it will not generate the default action associated with that event: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent#Auto-repeat_handling_prior_to_Gecko_5.0

So you have to implement a scroll behavior yourself (which will result in a strange behavior for most users, in my opinion).

I want to stop the default event on the textarea but not the higher level element. — Shamoon, Jun 20 '20 at 21:31
I've edited my answer, let me know if it answers your question — Guerric P, Jun 21 '20 at 09:47

How can I detect a key up / down event anywhere in an element?

2 Answers2