【flutter】 webview网页内唤起的键盘使用flutter关闭键盘方法无效

246 阅读2分钟

背景

项目中用flutterinAppwebview打开了一个网页,网页中有输入框,点击输入框唤起了键盘。 希望点击按钮收起键盘,结果用了所有flutter的收起键盘方法都没用。

问题原因

在 Flutter 中使用 flutter_inappwebview 插件打开网页时,唤起键盘后无法关闭键盘,可能是因为键盘的焦点仍然在 WebView 内部,而不在 Flutter 页面上。因此,我们需要使用 JavaScript 代码在 WebView 内部执行关闭键盘的操作。

解决办法

以下是一种在 Flutter 中关闭 WebView 内部键盘的方法:

在 flutter_inappwebview 插件中使用 InAppWebViewController 的 addJavaScriptHandler 方法来注册一个名为 keyboard 的 JavaScript 通道,用于从 Flutter 代码向 WebView 内部发送关闭键盘的命令。

// 1, 2 步骤可以省略

InAppWebView(
  initialUrl: 'http://example.com',
  initialOptions: InAppWebViewGroupOptions(
    crossPlatform: InAppWebViewOptions(
      javascriptEnabled: true,
    ),
  ),
  onWebViewCreated: (InAppWebViewController controller) {
    controller.addJavaScriptHandler(
      handlerName: 'keyboard',
      callback: (args) {
        SystemChannels.textInput.invokeMethod('TextInput.hide');
      },
    );
  },
);

在上面的代码中,我们通过 addJavaScriptHandler 方法注册了一个名为 keyboard 的 JavaScript 通道,并在通道的回调函数中执行了关闭键盘的操作。

  1. 在 WebView 内部使用 JavaScript 代码来监听键盘的事件,并在键盘唤起时向 Flutter 发送一个名为 hideKeyboard 的消息。
<input type="text" onfocus="javascript:window.flutter_inappwebview.callHandler('keyboard', 'hideKeyboard');" />

在上面的代码中,我们使用 onfocus 事件监听键盘的唤起,并在键盘唤起时通过 window.flutter_inappwebview.callHandler 方法向 Flutter 发送一个名为 hideKeyboard 的消息。这个消息会被 Flutter 代码中的 addJavaScriptHandler 监听到,并触发关闭键盘的操作。

  1. 在 Flutter 代码中使用 evaluateJavascript 方法来执行 JavaScript 代码,实现关闭 WebView 内部键盘的操作。

flutterInappwebviewController

controller.evaluateJavascript(source: 'document.activeElement.blur();');

在上面的代码中,我们使用 evaluateJavascript 方法执行了一段 JavaScript 代码,将 WebView 内部的焦点从当前输入框中移除,从而关闭了键盘。 综上所述,通过在 Flutter 代码中注册 JavaScript 通道,并在 WebView 内部使用 JavaScript 代码监听键盘事件,可以实现关闭 WebView 内部键盘的操作。