iOS 18中WKWebView加载H5页面时输入框聚焦反复出现滑键输入提示的屏蔽方案咨询

我最近在做iOS 18项目时，刚好碰到了和你一模一样的问题——用WKWebView加载H5页面，每次点击输入框获取焦点，键盘上就会弹出那个“滑动手指连接字母快速输入”的提示框，反复出现真的很影响用户体验。折腾了一阵后，总结了几个可行的解决方案，你可以挨个试试：

方案一：H5前端层面调整 #

iOS 18的滑键输入提示会根据输入框的属性和系统自动补全设置触发，我们可以通过给输入框添加特定属性来抑制提示弹出：

• 给目标输入框添加autocomplete="off"、inputmode="text"和spellcheck="false"属性，强制关闭自动补全、指定基础文本输入模式并禁用拼写检查，这些设置会干扰系统的QuickType提示逻辑。
  示例代码：

<input type="text" autocomplete="off" inputmode="text" spellcheck="false" placeholder="请输入内容" />

• 如果是多行文本框（textarea），同样可以添加这些属性，效果一致。

方案二：iOS Native端注入自定义JS脚本 #

如果前端调整效果不佳，我们可以在原生端通过WKUserScript注入JS脚本，在输入框聚焦时触发微小的交互，让系统跳过提示弹出：

1. 编写注入的JS代码：在页面加载完成后，给所有输入框绑定focus事件，通过临时修改输入框内容再还原的方式，干扰系统的提示触发逻辑：

document.addEventListener('DOMContentLoaded', function() {
  // 匹配所有输入框和多行文本框
  const inputElements = document.querySelectorAll('input, textarea');
  inputElements.forEach(input => {
    input.addEventListener('focus', function() {
      // 临时添加一个空格再删除，触发系统键盘的状态更新
      const originalVal = this.value;
      this.value = ' ';
      this.value = originalVal;
      // 强制光标定位到末尾
      this.setSelectionRange(this.value.length, this.value.length);
    });
  });
});

2. 在iOS原生代码中添加这个脚本到WKWebView的配置：

// 初始化WKWebView配置
let webConfig = WKWebViewConfiguration()
// 编写脚本源
let scriptSource = """
document.addEventListener('DOMContentLoaded', function() {
  const inputElements = document.querySelectorAll('input, textarea');
  inputElements.forEach(input => {
    input.addEventListener('focus', function() {
      const originalVal = this.value;
      this.value = ' ';
      this.value = originalVal;
      this.setSelectionRange(this.value.length, this.value.length);
    });
  });
});
"""
// 创建WKUserScript，在文档加载完成后注入
let userScript = WKUserScript(source: scriptSource, injectionTime: .atDocumentEnd, forMainFrameOnly: true)
// 添加脚本到配置
webConfig.userContentController.addUserScript(userScript)
// 初始化WKWebView
let webView = WKWebView(frame: view.bounds, configuration: webConfig)

注意事项 #

• 目前iOS 18的公开API中没有直接禁用滑键输入提示的接口，以上方案都是通过干扰系统触发逻辑实现的，后续iOS版本更新后可能需要调整。
• 测试时要覆盖不同类型的输入框（如number、email类型），部分特殊输入类型可能需要调整属性配置。

内容来源于stack exchange