[SOLVED] [V3] Why don't @keypress or @keyup fire on f7-input?

Questions
1

Goal: Fire an event when the ENTER key is pressed within a text field.

Diagnostics: Open the Chrome Vue Devtools, and switch to “Events” view. Now tap into a random f7-input, type a few characters, and notice what events show up. Only input related, no keypress events. Tapping ENTER shows up as a CHANGE, but only for the first ENTER press. Subsequent presses of ENTER don’t trigger the CHANGE event unless the input was changed. This might be a little confusing to a user.

So, how do we go about capturing the ENTER keypress now? Anyone?

2

Just use Vue’s native events e.g. @keypress.native=“doSomething”

1 Like
3

Thanks!
I’m new to Vue & Framework7, and just watched a few more tutorials and did some reading in the docs over the weekend.

For anyone stumbling across this in the future, the “native” modifier captures events from child elements of a component. This means that the @keypress (or keyup/keydown…etc) from the child “input” element can be captured.

@keypress.native.enter works great. :slight_smile:

1 Like