How do i find out which GWT element has focus?

Question

I would like to find out, in GWT, which element currently has focus. Basically i was working on virtual keyboard in our application. All keys are working fine except tab key

Answer 1

The fact that it's not supported in "all browsers" is only important if your app is targeting all browsers. activeElement is currently supported by quite a few browsers Why is there no isFocused() in GWT?.

I needed something similar, I needed to know from inside a widget if it had focus. I did the following

protected native boolean hasFocus(Element element) /*-{
   return element.ownerDocument.activeElement == element;
}-*/; 

I needed to pass in the current element to get the proper document, just calling

document.activeElement;

did not give me the document I needed. You could likely do the same but pass in the a different element (RootPanel element maybe?) and return the in focus Element rather than a bool.

protected native Element elementInFocus(Element element) /*-{
   return element.ownerDocument.activeElement;
}-*/; 

Answer 2

Short template:

public class IntBox extends com.google.gwt.user.client.ui.IntegerBox {

private boolean focused=false;

public IntBox(){

        addFocusHandler(new FocusHandler() {

            @Override
            public void onFocus(FocusEvent event) {
                focused=true;
            }
        });

        addBlurHandler(new BlurHandler() {

            @Override
            public void onBlur(BlurEvent event) {
                focused=false;
            }
        });

    }

    public boolean isFocused() {
        return focused;
    }

}

Answer 3

document.activeElement doesn't work in all browsers so there's no support for that in GWT. You could maybe use focus&blur handlers to keep track which element has it.

Answer 4

We can now use the Elemental library to accomplish this.

http://www.gwtproject.org/articles/elemental.html

the exact function would be

elemental.client.Browser.getDocument().getActiveElement()