Enter press event for vaadin 10 TextField

Question

Is there any specific way to add shortcut Listener for the Enter Key on a specific TextField element in Vaadin Flow. The documentation is silent about this.

Do you care about that particular keystroke, or detecting the user has completed data-entry in that field? — Basil Bourque, Aug 09 '18 at 05:23

score 6 · Answer 1 · edited May 07 '18 at 13:48

6

I guess you are not actually looking for a ”shortcut” key but to react to enter presses when the focus is inside the field? If so, see KeyNotifier and e.g. addKeyPressListener.

It is also possible to listen to any DOM event using the element API, e.g.

textField.getElement().addEventListener("keyup", e -> { 
    System.out.println("Value is now: " + 
        e.getEventData().getString("element.value"));
}).addEventData("element.value").setFilter("event.keyCode == 13");

edited May 07 '18 at 13:48

Ahmed Ashour

5,179
10
35
56

answered May 06 '18 at 11:12

Artur Signell

1,694
9
9

3

I'd recommend making the code more readable through filtering by `event.key = 'Enter'` instead of using obscure key codes. – Leif Åstrand May 06 '18 at 19:27

pernpas · Answer 2 · 2018-08-09T08:12:40.307

3

In the Vaadin Directory there is a UI Web Component for Vaadin 10. It's called shortcut. The usage is very simple:

Shortcut.add(messageField, Key.ENTER, sendButton::click);

You also can also add modifier keys like that:

Shortcut.add(messageField, Key.ENTER, sendButton::click, Key.SHIFT);

edited Aug 09 '18 at 08:12

answered Aug 08 '18 at 19:06

pernpas

199
3
17

Does this work with a `TextField` as well as a button? The Question was not about buttons. – Basil Bourque Aug 09 '18 at 05:25

Enter press event for vaadin 10 TextField

2 Answers2