Vaadin：返回键后自动点击按钮

Question

由于Vaadin 7中不再存在LoginForm，处理基本登录页面的最佳方法是什么，该页面由单个用户名/密码输入和＆＃34;登录＆＃34;组成。按钮。

如何确保在点击返回键时提交表单？我可以想办法做到这一点，但想到必须有一个更常见的方法。

Answer 1

一种简单的方法是使用LoginForm添加。 https://vaadin.com/directory#addon/loginform

另一种方法是只显示一个包含登录和密码字段的表单，并将“登录”按钮设置为默认操作。

在Vaadin 7：

// Have an Login button and set it as the default button
Button login = new Button("Login");
login.setClickShortcut(ShortcutAction.KeyCode.ENTER);  // Bind ENTER key to this button.
login.addStyleName(Reindeer.BUTTON_DEFAULT);           // Add styling as visual cue this button is the default button (has Enter key bound to it). 

Vaadin 8默认使用不同的主题， Valo 而不是 Reindeer ，使用不同的样式名称：

// Have an Login button and set it as the default button
Button login = new Button("Login");
login.setClickShortcut(ShortcutAction.KeyCode.ENTER); // Bind ENTER key to this button.
login.addStyleName(ValoTheme.BUTTON_PRIMARY);         // Add styling as visual cue this button is the default button (has Enter key bound to it). 

请参阅快捷键 for Vaadin 7和for Vaadin 8上的文档。请注意，某些Web浏览器可能不支持某些键盘快捷键。

Answer 2

Vaadin 13 +

在Vaadin Flow版本13和更高版本中，使用Button::addClickShortcut。在接口com.vaadin.flow.component.ClickNotifier中定义的方法。

此addClickShortcut方法替代了Vaadin 7和8中的setClickShortcut（ add 与 set ），如other correct Answer所示。

Button login = new Button("Login");  
login.addClickListener(click -> {
    //do your things here 
});       
login.addClickShortcut(Key.ENTER);  // ? Bind keyboard shortcut.

此代码将您的ENTER key绑定到事件监听器。