trigger for keyup + enter and escape key combinations
See original GitHub issuethanks for this great framework ! I am trying to port the TodoMVC Vue example http://todomvc.com/examples/vue/ to a custom implementation.
I’m having trouble porting this specific behavior expressed in Vue:
<input @blur="doneEdit(todo)" @keyup.enter="doneEdit(todo)" @keyup.esc="cancelEdit(todo)">
so the requirement is to do 2 different triggers for the same element, and only for specific keyup + key combinations. I was able to get hx-trigger="blur" to work perfectly. but I don’t know how to handle the ENTER and ESCAPE keys on the same element
if this needs some custom JS event handlers, can you provide some pointers, or what you feel would be the best way to do this
Issue Analytics
- State:
- Created 3 years ago
- Comments:6
Top Results From Across the Web
keyup event not triggered for escape key - Stack Overflow
It's hard to explain what's wrong here. There is a strange effect when both the button and the textbox receive focus?
Read more >How To Bind Specific Keys to the Keyup and Keydown Events ...
A shortcut way to trigger events only when certain keys are ... This feature works for special and modifier keys like ENTER ,...
Read more >KeyboardEvent.key - Web APIs | MDN
The KeyboardEvent interface's key read-only property returns the value of the key pressed by the user, taking into consideration the state ...
Read more >Keyboard: keydown and keyup - The Modern JavaScript Tutorial
Try different key combinations in the text field. ... For events triggered by auto-repeat, the event object has event.repeat property set to ...
Read more >JavaScript Keycode List – Keypress Event Key Codes for ...
The keypress event works only for a subset of the keys. You can't capture the Alt, Ctrl, Shift, Meta, and other similar key...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found

As an aside, I found the following trigger on an input to work for when the enter key is pressed:
hx-trigger=“keyup[key==‘Enter’]”
Just a quick note, so is htmx. Hyperscript is a companion project to htmx specifically made to offer extended functionality where htmx might fall short.