Flutter中InAppWebView如何实现输入框自动聚焦唤起软键盘

问题场景 #

在Flutter中使用InAppWebView加载网页时，默认只有用户手动点击网页内输入框才会弹出软键盘，无法在进入页面后自动聚焦指定输入框、直接唤起键盘供用户输入，初始实现代码如下：

import 'package:flutter_inappwebview/flutter_inappwebview.dart';


class WebViewScreen extends StatefulWidget {
  const WebViewScreen({Key? key}) : super(key: key);

  @override
  State<WebViewScreen> createState() => _WebViewScreenState();
}

class _WebViewScreenState extends State<WebViewScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: InAppWebView(
            initialUrlRequest:
                URLRequest(url: Uri.parse('https://www.google.com')),
            onWebViewCreated: (InAppWebViewController controller) {
              print('onWebViewCreated');
            },
            onProgressChanged:
                (InAppWebViewController controller, int progress) {
              print('onProgressChanged: $progress');
            },
          ),
        ),
      ),
    );
  }
}

问题对应效果截图：

核心解决思路 #

需要先破除两个默认限制：

• WebView原生默认禁止非用户手动触发的输入框聚焦唤起键盘行为
• 必须等网页DOM完全渲染完成后，才能定位到目标输入框执行聚焦操作

具体实现步骤 #

1. 给InAppWebView添加平台专属配置，关闭"必须用户交互才能弹出键盘"的限制，安卓端开启混合合成保证焦点事件正常传递
2. 在网页加载完成的回调中注入JS代码，定位到目标输入框执行聚焦方法
3. 主动请求WebView焦点，调用系统文本输入通道唤起软键盘

完整修改后代码 #

import 'package:flutter/services.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

class WebViewScreen extends StatefulWidget {
  const WebViewScreen({Key? key}) : super(key: key);

  @override
  State<WebViewScreen> createState() => _WebViewScreenState();
}

class _WebViewScreenState extends State<WebViewScreen> {
  late InAppWebViewController _webViewController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: InAppWebView(
            initialUrlRequest:
                URLRequest(url: Uri.parse('https://www.google.com')),
            initialOptions: InAppWebViewGroupOptions(
              crossPlatform: InAppWebViewOptions(
                javaScriptEnabled: true,
              ),
              android: AndroidInAppWebViewOptions(
                useHybridComposition: true,
              ),
              ios: IOSInAppWebViewOptions(
                // 关闭iOS端必须用户点击才弹键盘的限制
                keyboardDisplayRequiresUserAction: false,
              ),
            ),
            onWebViewCreated: (InAppWebViewController controller) {
              _webViewController = controller;
            },
            onProgressChanged:
                (InAppWebViewController controller, int progress) {
              print('onProgressChanged: $progress');
            },
            onPageFinished: (controller, url) async {
              // 替换下方选择器为目标页面输入框的对应选择器
              // 如果需要自动聚焦页面第一个输入框，直接用document.querySelector("input, textarea").focus()即可
              await controller.evaluateJavascript(source: '''
                (function() {
                  const targetInput = document.querySelector('input[name="q"]');
                  if (targetInput) {
                    targetInput.focus();
                  }
                })();
              ''');
              // 主动请求焦点唤起软键盘
              await _webViewController.requestFocus();
              SystemChannels.textInput.invokeMethod('TextInput.show');
            },
          ),
        ),
      ),
    );
  }
}

注意事项 #

• 不要在onWebViewCreated或者网页加载进度未到100%时执行聚焦逻辑，此时网页DOM还未渲染完成，无法定位到输入框元素
• 部分深度定制的安卓系统如果仍无法唤起键盘，可以在聚焦逻辑前加100-200ms的延迟，给WebView留出足够的初始化时间
• 如果加载的是自有业务网页，确保JS代码中的选择器和目标输入框的属性匹配，否则会出现找不到元素无法聚焦的问题

内容的提问来源于stack exchange，提问作者Pratik