iOS 11.3 WKWebView登录自动补全键盘栏非预期显示问题

我之前做iOS项目时也碰到过这个iOS 11.3之后出现的WKWebView bug，确实挺闹心的——只要登录表单里的密码输入框（或者被WebKit误识别成登录元素的输入框）显示过钥匙串自动补全栏，后面哪怕是普通的文本输入框、搜索框获焦，那个补全栏都会弹出来，非得重启APP才会消失。下面是我实测有效的几种解决办法：

一、给非登录输入框明确标记属性 #

WebKit有时候会误把普通输入框识别成登录相关元素，我们可以主动告诉它哪些不需要自动补全：

• 对于完全不需要自动补全的输入框，直接设置autocomplete="off"：

  <input type="text" autocomplete="off" placeholder="请输入普通内容">
  

• 如果是有明确用途的输入框（比如地址、昵称），可以设置更具体的autocomplete值，让WebKit准确识别它的类型：

  <input type="text" autocomplete="nickname" placeholder="你的昵称">
  <input type="text" autocomplete="street-address" placeholder="收货地址">
  

二、重置WKWebView的自动填充状态 #

当从登录页面切换到普通页面时，我们可以通过先加载空白页再加载目标页面的方式，清除WebView之前的自动补全触发状态：

// Swift 代码示例
// 先加载空白页重置状态
webView.load(URLRequest(url: URL(string: "about:blank")!))
// 延迟加载目标页面，确保空白页加载完成
DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
    self.webView.load(URLRequest(url: yourTargetPageURL))
}

这个方法虽然有点“hack”，但实测能有效解决后续输入框误弹补全栏的问题。

三、优化登录表单的结构 #

让WebKit能精准识别登录表单，避免把其他输入框归为同一类：

• 给登录表单加上autocomplete="on"，并明确标记用户名和密码输入框的类型：

  <form autocomplete="on">
      <input type="text" autocomplete="username" placeholder="用户名/邮箱">
      <input type="password" autocomplete="current-password" placeholder="登录密码">
      <button type="submit">登录</button>
  </form>
  

这样WebKit只会在这个表单的输入框触发自动补全，其他页面的普通输入框就不会被牵连了。

四、谨慎调整WKWebView配置（可选） #

如果你的APP完全不需要自动补全功能，可以在初始化WKWebView时禁用相关设置，但这个方法要谨慎使用，会影响正常的登录补全体验：

// Swift 代码示例
let webConfig = WKWebViewConfiguration()
// 禁用自动链接检测和部分自动填充相关行为
webConfig.defaultWebpagePreferences.automaticLinkDetectionEnabled = false
// 初始化WebView
let webView = WKWebView(frame: .zero, configuration: webConfig)

补充：如果还遇到钥匙串栏的其他异常（比如显示错误账号、无法手动关闭），可以检查APP的钥匙串访问权限是否正常，或者建议用户在iOS设置的「Safari浏览器」中重置自动填充设置，但这属于用户端操作，开发者主要还是通过上述代码和HTML层面的优化来解决问题。

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