How detect Enter key in ValueChangeListener in textfield?

Vaadin 6 / 7 / 8
1

Hi,
I need a detect enter key when valuechange listener for textfield in vaadin 8. I needs trigger if user click enter key from textfield. I know I can use shortcut key for that. But I have multiple textfield where need to detect enter key press and trigger to one other component.

So please anyone know, how can I detect Enter key inside of valuechangelistener for Textfield in vaadin 8.

Thanks
Bishwajti

2

I think you can make a simple extension for this purpose, check out this
https://vaadin.com/docs/v8/framework/gwt/gwt-extension.html

3

Hi,

Just like Haijian suggested, you can achieve that by creating a simple extension for the TextField. Here is a working example on how to extend the text field and handle the enter key pressed event on the server.

import com.example.extension.client.TextFieldExtensionServerRpc;
import com.vaadin.server.AbstractExtension;
import com.vaadin.ui.TextField;

public class TextFieldExtension extends AbstractExtension {

  public TextFieldExtension(TextField field) {
    super.extend(field);
    TextFieldExtensionServerRpc rpc = this::handleEnterKeyPressed;
    registerRpc(rpc);
  }

  private void handleEnterKeyPressed() {
    System.out.println("ENTER KEY PRESSED");
  }
}
import com.example.extension.TextFieldExtension;
import com.google.gwt.event.dom.client.KeyCodes;
import com.google.gwt.event.dom.client.KeyPressEvent;
import com.google.gwt.event.dom.client.KeyPressHandler;
import com.google.gwt.user.client.ui.Widget;
import com.vaadin.client.ComponentConnector;
import com.vaadin.client.ServerConnector;
import com.vaadin.client.extensions.AbstractExtensionConnector;
import com.vaadin.shared.ui.Connect;

@Connect(TextFieldExtension.class)
public class TextFieldExtensionConnector extends AbstractExtensionConnector {

  @Override
  protected void extend(ServerConnector target) {

    final Widget widget = ((ComponentConnector) target).getWidget();

    widget.addDomHandler(new KeyPressHandler() {
      public void onKeyPress(KeyPressEvent event) {
        if (isEnabled() && isEnterKey(event)) {
          getRpcProxy(TextFieldExtensionServerRpc.class).enterKeyPressed();
        }
      }
    }, KeyPressEvent.getType());

  }

  private boolean isEnterKey(KeyPressEvent event) {
    return event.getNativeEvent().getKeyCode() == KeyCodes.KEY_ENTER;
  }
}

[code]
import com.vaadin.shared.communication.ServerRpc;

public interface TextFieldExtensionServerRpc extends ServerRpc {
public void enterKeyPressed();
}
[/code]Then, in your code you just have to extend your text field such as:

TextField myTextField = new TextField(); TextFieldExtension extension = new TextFieldExtension(myTextField); Hope this helps,
Goran

4

I know you didn’t mention it specifically, but on the off chance that you want to mimic Vaadin 7 ValueChangeEvent behaviour, note that you also need to consider tabulator and clicking outside of the field.

5

Thanks everyone. :slight_smile: Now that’s working after creating extension. :slight_smile:

6
7

It should work. Have you compiled the widgetset? Or can you share your code, so that I can see what might be wrong.

8

The TextFieldExtensionServerRpc and TextFieldExtensionConnector should be put into client folder because those two files need to be compiled into widgetset.
You can move those two files to com.example.add_on_myapplication.client folder.

9
10