如何修改iOS键盘Done按钮文字？Web应用（非原生）适配咨询

阿华AIGC实验室

2026-5-15

当然可行！两种全局修改方案任你选

针对你这种Web应用嵌入Xcode WKWebView的场景，要全局替换所有输入框对应的键盘顶部"Done"按钮文字，完全可以实现。下面给你两种靠谱的方案，按需选择：

方案一：原生端全局替换（推荐，体验更贴近系统）

这种方法不需要修改Web应用的代码，直接通过iOS原生代码自定义键盘辅助工具栏，全局应用到WKWebView的所有输入元素上：

先写一个自定义工具栏的创建方法
在你的WKWebView所在的ViewController里，定义一个返回UIToolbar的方法，里面放上你想要文字的按钮（比如换成"完成"或其他自定义内容）：

private func makeCustomInputToolbar() -> UIToolbar {
    let toolbar = UIToolbar(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 44))
    // 左边留空占位，把按钮推到右边
    let flexibleSpace = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
    // 自定义按钮，这里把title改成你要的文字
    let customDoneBtn = UIBarButtonItem(title: "搞定", style: .done, target: self, action: #selector(onCustomDoneTap))
    toolbar.items = [flexibleSpace, customDoneBtn]
    toolbar.tintColor = .systemBlue // 按钮颜色可以自己调
    return toolbar
}

让WKWebView用上这个自定义工具栏
首先把当前ViewController设为WKWebView的uiDelegate：
```
webView.uiDelegate = self
```
然后实现WKUIDelegate的inputAccessoryViewFor方法，这个方法会在WebView里的输入元素获得焦点时被调用，我们直接返回刚才创建的自定义工具栏：
```
extension YourViewController: WKUIDelegate {
    func webView(_ webView: WKWebView, inputAccessoryViewFor element: WKWebViewConfiguration.Element) -> UIView? {
        return makeCustomInputToolbar()
    }
}
```
处理按钮点击事件，模拟系统Done的功能
点击自定义按钮后，需要让当前聚焦的输入框失去焦点，收起键盘，我们用JS来实现这个逻辑：
```
@objc private func onCustomDoneTap() {
    // 执行JS让当前活跃的输入框失去焦点
    webView.evaluateJavaScript("document.activeElement.blur();") { _, error in
        if let err = error {
            print("收起键盘失败：\(err.localizedDescription)")
        }
    }
}
```
这样不管WebView里哪个输入框获得焦点，都会显示你自定义文字的按钮，点击后直接收起键盘，和系统Done按钮的体验一致。

方案二：Web端全局注入JS（适合不想改原生代码的场景）

如果不想动iOS原生代码，也可以通过给Web应用注入全局JS的方式，给所有输入框替换自定义工具栏：

写一段全局监听的JS脚本
这段JS会监听所有输入元素的焦点事件，动态创建自定义工具栏，替换掉系统默认的Done工具栏：

// 全局监听输入框获取焦点事件
document.addEventListener('focusin', function(e) {
    const target = e.target;
    // 只处理输入类元素：input、textarea、可编辑内容
    if (['INPUT', 'TEXTAREA'].includes(target.tagName) || target.isContentEditable) {
        // 避免重复创建工具栏
        if (!target._customToolbar) {
            // 创建自定义工具栏容器
            const toolbar = document.createElement('div');
            Object.assign(toolbar.style, {
                position: 'fixed',
                bottom: '0',
                left: '0',
                width: '100%',
                height: '44px',
                backgroundColor: '#f2f2f2',
                borderTop: '1px solid #ccc',
                display: 'flex',
                justifyContent: 'flex-end',
                alignItems: 'center',
                paddingRight: '16px',
                zIndex: '9999'
            });
            
            // 创建自定义按钮
            const doneBtn = document.createElement('button');
            doneBtn.textContent = "搞定"; // 这里改你要的文字
            Object.assign(doneBtn.style, {
                backgroundColor: 'transparent',
                border: 'none',
                color: '#007aff',
                fontSize: '17px',
                cursor: 'pointer'
            });
            
            // 点击按钮收起键盘并隐藏工具栏
            doneBtn.addEventListener('click', function() {
                target.blur();
                toolbar.style.display = 'none';
            });
            
            toolbar.appendChild(doneBtn);
            document.body.appendChild(toolbar);
            target._customToolbar = toolbar;
            
            // 输入框失去焦点时隐藏工具栏
            target.addEventListener('focusout', () => {
                toolbar.style.display = 'none';
            });
        }
        // 显示工具栏
        target._customToolbar.style.display = 'flex';
    }
});

在原生端注入这段JS
在WKWebView加载你的Web应用之前，把上面的JS注入进去：

// 把上面的JS代码复制到这里
let customToolbarJS = """
// 这里粘贴JS代码
"""
// 创建用户脚本，在文档加载开始时注入
let userScript = WKUserScript(source: customToolbarJS, injectionTime: .atDocumentStart, forMainFrameOnly: true)
webView.configuration.userContentController.addUserScript(userScript)

这样Web应用加载后，所有输入框获得焦点时都会显示你自定义的工具栏，点击按钮就能收起键盘。