iOS Swift 4：如何为WKWebView设置带语言切换globe图标的键盘

我之前也踩过这个坑——WKWebView里的网页输入框经常不显示带Globe图标的多语言切换键盘，毕竟WebKit的输入逻辑和原生UIKit有点不一样。不过别担心，按下面的步骤来，就能搞定这个问题：

1. 先给WKWebView挂上UIDelegate #

首先，你的ViewController得遵守WKUIDelegate协议，并且把WebView的uiDelegate设为自身。这是后续处理输入事件的基础：

class YourViewController: UIViewController, WKUIDelegate {
    private var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 初始化WebView配置
        let webConfig = WKWebViewConfiguration()
        
        // 后面会在这里加JS脚本，先别急
        
        // 创建WebView并设置代理
        webView = WKWebView(frame: view.bounds, configuration: webConfig)
        webView.uiDelegate = self
        webView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        view.addSubview(webView)
        
        // 加载你的目标网页（本地或远程都可以）
        guard let url = URL(string: "https://your-web-page.com") else { return }
        webView.load(URLRequest(url: url))
    }
}

2. 注入JavaScript给输入元素添加多语言标识 #

WKWebView能否触发多语言键盘，很大程度上取决于网页输入元素是否有明确的语言属性。我们可以通过注入JS脚本，自动给所有输入框、文本域和可编辑元素加上lang属性，让WebKit知道这个输入支持多语言切换：

把这段代码加到刚才的WebView配置里（在创建WebView之前）：

// 编写JS脚本：给所有输入元素设置lang属性，并监听DOM变化
let inputSetupScript = """
function configureInputElements() {
    // 选中所有输入相关元素
    const inputs = document.querySelectorAll('input, textarea, [contenteditable="true"]');
    
    inputs.forEach(input => {
        // 如果没有lang属性，就设为当前浏览器的语言
        if (!input.lang) {
            input.lang = navigator.language;
        }
        
        // 监听focus事件，确保属性不会被网页脚本覆盖
        input.addEventListener('focus', () => {
            if (!input.lang) {
                input.lang = navigator.language;
            }
        });
    });
}

// 页面加载完成后执行一次
document.addEventListener('DOMContentLoaded', configureInputElements);

// 监听DOM变化，动态添加的元素也能被处理
const domObserver = new MutationObserver(configureInputElements);
domObserver.observe(document.body, { childList: true, subtree: true });
"""

// 创建用户脚本并添加到配置中
let userScript = WKUserScript(
    source: inputSetupScript,
    injectionTime: .atDocumentEnd,
    forMainFrameOnly: true
)
webConfig.userContentController.addUserScript(userScript)

3. 确认用户设备的键盘设置 #

别忘了最基础的一点：用户的iOS设备必须已经添加了至少两种语言的键盘！如果用户只开了一种语言，Globe图标本来就不会显示，这是系统级的限制，代码没法强制修改。你可以在应用的设置说明里提醒用户这一点。

额外的兜底方案（如果上面的方法不生效） #

如果某些特殊网页还是不显示Globe图标，可以尝试通过WKUIDelegate的方法干预输入会话。不过这个方法比较hack，一般前面的步骤就足够了，这里只做补充：

// 实现WKUIDelegate的方法，处理输入元素预览
func webView(_ webView: WKWebView, shouldPreviewElement elementInfo: WKPreviewElementInfo) -> Bool {
    // 这里可以尝试获取输入元素的信息，强制触发多语言键盘
    // 比如模拟一个原生UITextField的输入会话（需要额外处理）
    return true
}

按照上面的步骤来，你的WKWebView里的输入框应该就能稳定显示带Globe图标的语言切换键盘了！

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