question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

trigger for keyup + enter and escape key combinations

See original GitHub issue

thanks 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:closed
  • Created 3 years ago
  • Comments:6

github_iconTop GitHub Comments

1reaction
rmmcgrcommented, Feb 15, 2022

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’]”

0reactions
Miguel-Serejocommented, Aug 3, 2020

but it seems to be new / evolving.

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found