具有contenteditable的Webview无法以编程方式进行聚焦 [英] Webview with contenteditable cannot be focused programmatically
问题描述
在用户第一次点击控件之前，尝试在WebView上执行requestFocus（）不起作用。
Trying to do a requestFocus() on the WebView does not work until the user has first clicked on the control.
我知道这必须是可能的，因为htmlEditor可以以这种方式聚焦（我怀疑它基于一个令人满意的WebView）。
I know this must be possible as htmlEditor can be focused this way (and I suspect it is based on a contenteditable WebView).
我使用带有contenteditable的webview编写我自己的专用htmlEditor，我真的会喜欢能像我用标准的htmlEditor那样关注它。
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.
我相信这一定是Javafx的一个问题，我已经把它提交给了Jira，但是我想知道是否有人可以考虑解决这个问题。
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.
更新：jira中的问题编号：RT-21695
UPDATE: Issue number in jira: RT-21695
简短演示代码：
/* 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();
}
}
推荐答案
requestFocus api只是一个焦点请求，它不保证焦点。
The requestFocus api is just a request for focus, it does not guarantee focus.
有时其他JavaFX控件的内部实现会在您之前或之后请求焦点请求焦点最终在你的requestFocus调用中没有任何效果。
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.
通常你可以通过将它包装在 Platform.runLater 或使用使用时间轴 /docs.oracle.com/javafx/2/api/javafx/animation/KeyFrame.html\"rel =nofollow> KeyFrame ，在延迟后调用requestFocus。
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.
如果这些都不起作用，那么JavaFX团队可以在您提交的jira环境中解决WebView的requestFocus处理中的错误。
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.
更新
问题示例代码中的具体问题是，虽然WebView专注于，WebView中的可编辑内容元素没有集中。
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.
我尝试加载示例代码中的html < html>< head> ;< / head>< body contenteditable ='true'>< / body>< / html> 进入firefox并且它的行为与JavaFX WebView完全相同（即可编辑的内容元素在被点击之前没有被聚焦。所以我不认为这是WebView的一个问题。
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.
要使可编辑元素集中，你需要在需要聚焦时执行一些脚本，例如javascript onload hook < body onLoad ='document.body.focus（）;'contenteditable ='true'/>
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'/>
这是一个可执行的示例应用程序，它演示了对JavaFX WebView中可信元素的焦点行为的编程控制：
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();
}
}
这篇关于具有contenteditable的Webview无法以编程方式进行聚焦的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
