Webview with contenteditable cannot be focused programmatically


Question

Trying to do a requestFocus() on the WebView does not work until the user has first clicked on the control.

I know this must be possible as htmlEditor can be focused this way (and I suspect it is based on a contenteditable WebView).

I am coding my own specialized htmlEditor using a webview with "contenteditable" and I would really like to be able to focus it like I can do with the standard htmlEditor.

I believe this must be an issue with Javafx and I have already submitted it to Jira, but I wonder if anyone can think of a work-around for this.

UPDATE: Issue number in jira: RT-21695

Short demostration code:

/* Demo webview */

public class WebViewConteneditableDemo extends Application {


String initialEditview = "<html><head>"
        + "</head><body contenteditable='true'>"
        +"</body></html>";

/**
 * @param args the command line arguments
 */
public static void main(String[] args) {
    launch(args);
}

@Override
public void start(Stage primaryStage) {
    primaryStage.setTitle("Webview focus demo");


    final WebView editor = new WebView();

    Button btn = new Button();
    btn.setText("Test Webview focus");
    btn.setOnAction(new EventHandler<ActionEvent>() {

        @Override
        public void handle(ActionEvent event) {
           editor.requestFocus();
        }
    });

    BorderPane root = new BorderPane();
    root.setTop(btn);

    root.setCenter(editor);
    editor.getEngine().loadContent(initialEditview);

    primaryStage.setScene(new Scene(root, 500, 450));
    primaryStage.show();
}

}

1
2
5/22/2012 1:24:03 AM

Accepted Answer

The requestFocus api is just a request for focus, it does not guarantee focus.

Sometimes the internal implementation of other JavaFX controls request focus before or after you have requested focus which ends up in your requestFocus call not having any effect.

Often you can make the requestFocus call take effect by either wrapping it in a Platform.runLater or using a Timeline with a KeyFrame which invokes requestFocus after a delay.

If neither of those work, then there is likely a bug in the requestFocus processing for WebView which the JavaFX team can address in the context of the jira you filed.

Update

The specific issue in the sample code in the question was that, although the WebView was focused, the editable content element in the WebView was not focused.

I tried loading just the html from the sample code <html><head></head><body contenteditable='true'></body></html> into firefox and it behaved exactly the same as the JavaFX WebView (i.e. the editable content element was not focused until it was clicked on). So I don't believe this is an issue with WebView.

To get the editable element focused, you need to execute some script when you want it focused, for example in the javascript onload hook <body onLoad='document.body.focus();' contenteditable='true'/>

Here is an executable sample application which demonstrates programmatic control of focus behaviour of contenteditable elements in a JavaFX WebView:

import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.event.*;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.scene.web.WebView;
import javafx.stage.Stage;

public class WebViewEditable extends Application {
  String content = "<body bgcolor='cornsilk' onLoad='document.body.focus();' contenteditable='true'/>";
  public static void main(String[] args) { launch(args); }
  @Override public void start(Stage stage) {
    final WebView editor = new WebView();
    editor.getEngine().loadContent(content);

    Button webviewFocusButton = new Button("Focus on WebView");
    webviewFocusButton.setOnAction(new EventHandler<ActionEvent>() {
      @Override public void handle(ActionEvent event) {
        editor.getEngine().executeScript("document.body.focus()");
        editor.requestFocus();
      }
    });
    Button selfFocusButton = new Button("Focus on this Button");

    Label focusLabel = new Label();
    focusLabel.textProperty().bind(Bindings
      .when(editor.focusedProperty())
        .then("WebView has the focus.")
        .otherwise("WebView does not have the focus.")
    );
    focusLabel.setMaxWidth(Double.MAX_VALUE);
    focusLabel.setStyle("-fx-background-color: coral; -fx-padding: 5;");

    BorderPane layout = new BorderPane();
    layout.setTop(HBoxBuilder.create().spacing(10).children(webviewFocusButton, selfFocusButton).style("-fx-padding: 10; -fx-background-color: palegreen").build());
    layout.setCenter(editor);
    layout.setBottom(focusLabel);
    stage.setScene(new Scene(layout));
    stage.show();
  }
}
4
5/22/2012 10:31:53 PM

you can focus the webview of the HTMLEditor this way:

import com.sun.javafx.scene.web.skin.HTMLEditorSkin;

import javafx.application.Application;
import javafx.application.Platform;
import javafx.scene.Scene;
import javafx.scene.input.MouseButton;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.GridPane;
import javafx.scene.web.HTMLEditor;
import javafx.scene.web.WebView;
import javafx.stage.Stage;

public class FocusTest extends Application {

    public static void main(final String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) throws Exception {
        final HTMLEditor editor = new HTMLEditor();
        final WebView view = (WebView) ((GridPane)((HTMLEditorSkin)editor.getSkin()).getChildren().get(0)).getChildren().get(2);

        primaryStage.setScene(new Scene(editor));
        primaryStage.sizeToScene();
        primaryStage.show();

        Platform.runLater(() -> {
            view.fireEvent(new MouseEvent(MouseEvent.MOUSE_PRESSED, 100, 100, 200, 200, MouseButton.PRIMARY, 1, false, false, false, false, false, false, false, false, false, false, null));
            editor.requestFocus();
            view.fireEvent(new MouseEvent(MouseEvent.MOUSE_RELEASED, 100, 100, 200, 200, MouseButton.PRIMARY, 1, false, false, false, false, false, false, false, false, false, false, null));
        });
    }

}

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Icon