Vaadin TextField 的值在快捷方式侦听器中不可用
Vaadin TextField's value not available in shortcut listener
我想在用户按下 Enter 键时读取 Vaadin Flow TextField 的值。我可以添加一个 ShortcutListener 来侦听按键,但即使 TextField 不为空,侦听器中 TextField 的值为 null:
TextField textField = new TextField();
Shortcuts.addShortcutListener(UI.getCurrent(), () -> {
String text = texttextField.getValue();
// text doesn't contain the latest text
}, Key.ENTER);
为什么会发生这种情况,如何在触发按键侦听器时读取用户输入的值?
行为归结为浏览器事件。虽然用户可能已经在 input 元素中输入了一些文本,但 TextField
的值不会更新到服务器,直到有 ValueChange
事件 - 甚至浏览器中的 vaadin-text-field
元素也不会当输入按键事件发生时,“不知道”文本(value
属性 尚未更新)。默认情况下,文本字段的值仅在输入失去焦点时更新。您可以通过显式切换 TextField 的 blur
来解决此问题:
// member field in class
boolean shortcutFired = false;
// ...
Shortcuts.addShortcutListener(UI.getCurrent(), () -> {
textField.blur();
shortcutFired = true;
}, Key.ENTER);
并监听值更改事件而不是快捷方式监听器:
textField.addValueChangeListener(e -> {
if( shortcutFired ) {
String value = e.getValue();
// do something with the value
shortcutFired = false;
}
}
如果您需要跟踪多个字段,则此方法效果不佳;在这种情况下,您可能希望通过将 TextFields 的 ValueChangeMode 设置为 ValueChangeMode.EAGER
,使 TextFields 更急切地将它们的值更新到服务器。这种方法的缺点是它增加了浏览器和网络之间的流量,因为每次按键都会触发服务器请求。
我想在用户按下 Enter 键时读取 Vaadin Flow TextField 的值。我可以添加一个 ShortcutListener 来侦听按键,但即使 TextField 不为空,侦听器中 TextField 的值为 null: TextField textField = new TextField();
Shortcuts.addShortcutListener(UI.getCurrent(), () -> {
String text = texttextField.getValue();
// text doesn't contain the latest text
}, Key.ENTER);
为什么会发生这种情况,如何在触发按键侦听器时读取用户输入的值?
行为归结为浏览器事件。虽然用户可能已经在 input 元素中输入了一些文本,但 TextField
的值不会更新到服务器,直到有 ValueChange
事件 - 甚至浏览器中的 vaadin-text-field
元素也不会当输入按键事件发生时,“不知道”文本(value
属性 尚未更新)。默认情况下,文本字段的值仅在输入失去焦点时更新。您可以通过显式切换 TextField 的 blur
来解决此问题:
// member field in class
boolean shortcutFired = false;
// ...
Shortcuts.addShortcutListener(UI.getCurrent(), () -> {
textField.blur();
shortcutFired = true;
}, Key.ENTER);
并监听值更改事件而不是快捷方式监听器:
textField.addValueChangeListener(e -> {
if( shortcutFired ) {
String value = e.getValue();
// do something with the value
shortcutFired = false;
}
}
如果您需要跟踪多个字段,则此方法效果不佳;在这种情况下,您可能希望通过将 TextFields 的 ValueChangeMode 设置为 ValueChangeMode.EAGER
,使 TextFields 更急切地将它们的值更新到服务器。这种方法的缺点是它增加了浏览器和网络之间的流量,因为每次按键都会触发服务器请求。