How to bind keyboard events in Template of Lit Web Component

Question

I have a Lit web component that contains a button with a click event. Simplified, it looks like this:

<button @click=${props.onClick}>
    <!-- button content -->
</button>

The onClick function is triggered on mouse click, and even on a spacebar keypress (when the button is focused with the keyboard).
But, I also want this logic to trigger when the enter/return key is pressed on the keyboard (while the button is focused). I can't find a way to tie keyboard events to the template. In Angular I was just able to add things like: (keydown.enter)="myLogic()", but that doesn't seem to work here.

For added context, the Lit web component contains more items than just this button.

Any info on tying keyboard events to the templates of a Lit web component?

Nishant · Accepted Answer · 2024-08-10 17:27:58Z

1

It's just like how you would add a click

<button @keydown=${doSomething}>
    <!-- button content -->
</button>

answered Aug 10, 2024 at 17:27

Nishant

9147 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ineedtoknow Over a year ago

Yes, I was looking to have something triggered only on a particular keydown (like keydown.enter is only triggered when the enter key is pressed), but that doesn't seem to be possible. So I just have to check the key code in the event on the keydown function.

Nishant Over a year ago

Yes, that's true. You have to check for the specific key like enter in your case, there are no key specific events by default built into LIT

Collectives™ on Stack Overflow

How to bind keyboard events in Template of Lit Web Component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related