Flutter中如何默认聚焦WebView以实现自动聚焦内部输入框？

问题核心在于WebView作为原生控件默认不会自动获取焦点，导致前端的focus()调用因document.hasFocus()返回false而失效。以下是分平台的具体解决方案：

一、原生层主动触发WebView聚焦 #

Android 实现 #

在WebView加载完成的回调中，先让WebView自身获取焦点，再执行聚焦输入框的JS代码：

webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        // 先让WebView获取焦点
        view.requestFocus();
        // 执行JS聚焦目标输入框
        view.evaluateJavascript("document.getElementById('targetInput').focus();", null);
    }
});

额外配置：如果WebView嵌套在ScrollView等容器中，需在布局XML里给WebView添加：

android:focusable="true"
android:focusableInTouchMode="true"

iOS 实现 #

使用WKWebView时，在加载完成回调中先让WebView成为第一响应者，再执行JS：

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    // 让WebView获取焦点
    webView.becomeFirstResponder()
    // 聚焦目标输入框
    webView.evaluateJavaScript("document.getElementById('targetInput').focus()", completionHandler: nil)
}

（UIWebView可复用becomeFirstResponder()逻辑，不过UIWebView已被苹果废弃，建议迁移到WKWebView）

二、前端层兼容处理 #

如果原生层设置后仍有异常，可在前端JS中补充逻辑：

1. 监听document的focus事件，WebView聚焦后立即触发输入框聚焦：

document.addEventListener('focus', () => {
    const targetInput = document.getElementById('targetInput');
    if (targetInput) {
        targetInput.focus();
        // 可选：自动选中输入框文本
        targetInput.select();
    }
}, { once: true }); // 仅执行一次，避免重复触发

2. 极端情况用延迟执行兜底：

window.addEventListener('load', () => {
    setTimeout(() => {
        const targetInput = document.getElementById('targetInput');
        if (targetInput && document.hasFocus()) {
            targetInput.focus();
        }
    }, 100); // 延迟时间可根据实际场景调整
});

三、常见问题排查 #

• 确保WebView在加载完成时处于可见状态，被遮挡或不可见时无法获取焦点。
• JS代码必须在页面完全加载后执行，否则会找不到目标输入框元素。
• Android设备上可配合唤起输入法，强化聚焦效果：

InputMethodManager imm = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);
imm.showSoftInput(webView, InputMethodManager.SHOW_IMPLICIT);

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