React Native WebView硬件键盘Tab跳转跳过首个可聚焦元素问题咨询

• 在react-native-webview内部署密码确认表单，需要适配硬件键盘操作
• 连接硬件键盘按下Tab键时，焦点进入WebView范围后会直接跳过第一个可聚焦表单元素，定位到第二个可聚焦元素
• 表单为常规结构，包含密码输入框、确认密码输入框、提交按钮三类基础可交互元素

这是react-native-webview生态的高频已知问题，触发原因主要有两点：

• Android端WebView组件默认会把自身根容器注册为可聚焦节点，硬件键盘触发Tab焦点切换时，第一个命中的焦点是WebView根容器而非内部DOM元素。根容器没有绑定交互响应逻辑，系统会自动跳过该节点，将焦点直接下发到DOM树中第二个注册的可聚焦元素
• iOS端WKWebView默认的焦点遍历逻辑不会在首次进入时自动定位到DOM树第一个可交互元素，初始焦点会落在WebView的滚动容器上，同样会触发跳过首个元素的异常

1. React Native侧配置修复 #

优先从端侧配置解决，兼容性最好：

• 先检查依赖版本，若react-native-webview版本低于11.26.0，先升级到该版本及以上，低版本存在Android端焦点遍历的官方已知bug，11.26.0版本已修复WebView容器抢占首焦点的问题
• 不要在WebView外层包裹Touchable系列可点击组件，外层可点击组件会被注册为独立焦点节点，打乱Tab键遍历顺序
• 给WebView组件添加核心配置，同时注入脚本修正焦点遍历逻辑，参考代码：

import WebView from 'react-native-webview';

// 业务代码中使用
<WebView
  source={{ /* 你的表单页资源配置 */ }}
  javaScriptEnabled={true}
  keyboardDisplayRequiresUserAction={false}
  androidLayerType="hardware"
  injectedJavaScript={`
    // 全局拦截Tab键，手动接管焦点遍历
    document.addEventListener('keydown', (e) => {
      if (e.key !== 'Tab') return;
      // 收集页面内所有有效可聚焦元素
      const focusableList = Array.from(document.querySelectorAll(
        'input:not([disabled]), button:not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href], [tabindex]:not([tabindex="-1"])'
      )).filter(el => el.offsetParent !== null);
      
      const currentFocusIndex = focusableList.indexOf(document.activeElement);
      e.preventDefault();

      // 初始焦点在body/容器上时，直接定位到第一个元素
      if (currentFocusIndex === -1 || document.activeElement === document.body) {
        focusableList[0]?.focus();
        return;
      }

      // 处理Shift+Tab反向遍历逻辑
      const nextIndex = e.shiftKey
        ? (currentFocusIndex - 1 + focusableList.length) % focusableList.length
        : (currentFocusIndex + 1) % focusableList.length;
      focusableList[nextIndex]?.focus();
    });
    true;
  `}
/>

• iOS端额外适配：如果是原生定制的WebView组件，需要在webViewDidFinishLoad代理回调中设置webView.keyboardDisplayRequiresUserAction = NO，同时将WebView关联的scrollView的keyboardDismissMode设为none，避免焦点切换时键盘异常收回。

2. H5页面侧修复 #

如果没有端侧修改权限，可以直接在WebView加载的H5表单页内做适配：

• 给第一个可聚焦的表单元素添加autofocus属性，注意不要把属性加在disabled、hidden状态的元素上
• 不要手动给元素设置大于0的tabindex值，所有可交互元素保持默认tabindex=0即可，避免打乱原生焦点遍历顺序
• 页面加载完成后延迟触发第一个元素的focus事件，适配WebView焦点树初始化延迟的问题，参考代码：

document.addEventListener('DOMContentLoaded', () => {
  const firstFocusableEl = document.querySelector('input:not([disabled]), button:not([disabled])');
  if (firstFocusableEl) {
    setTimeout(() => firstFocusableEl.focus(), 100);
  }
})

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