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

背景

项目中用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 通道，并在通道的回调函数中执行了关闭键盘的操作。

2. 在 WebView 内部使用 JavaScript 代码来监听键盘的事件，并在键盘唤起时向 Flutter 发送一个名为 hideKeyboard 的消息。

<input type="text" onfocus="javascript:window.flutter_inappwebview.callHandler('keyboard', 'hideKeyboard');" />

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

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

flutterInappwebviewController

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

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