ReactJS应用在IE10中Tab键切换文本框聚焦异常问题求助

我之前在做兼容IE10的React项目时，也碰到过一模一样的问题——Chrome和Firefox里Tab键正常跳转到下一个输入框，IE10里却要按两次才行。结合你说的自定义<TextBox>基于<Input>实现的情况，大概率是组件内部的焦点管理或者IE10的兼容性 quirks 导致的，给你几个亲测有效的解决方案：

• 排查组件内部的额外可聚焦元素
  IE10的Tab导航会遍历页面上所有默认可聚焦或者设置了tabindex（不为-1）的元素。你的自定义<TextBox>可能在核心的<Input>之外，渲染了一些你没注意到的可聚焦元素——比如用于样式装饰的<div>被误加了tabindex，或者组件内部有隐藏的辅助输入框。第一次Tab其实是聚焦到了这个“隐形”元素，第二次才到目标密码框。
  解决步骤：

  1. 打开IE10的开发者工具，查看页面DOM结构，找到两个<TextBox>之间的额外元素
  2. 给这些不需要参与Tab导航的元素设置tabindex="-1"，如果是完全隐藏的元素，再加上aria-hidden="true"和display: none，彻底排除在焦点流之外

• 手动接管Tab键的焦点传递
  IE10对React合成事件的焦点处理有一些兼容性问题，我们可以手动监听Tab键事件，直接把焦点转到下一个输入框：

  // 先给密码框的TextBox创建ref
  const passwordInputRef = useRef(null);
  
  // 监听邮箱框的Tab按键事件
  const handleEmailTabPress = (e) => {
    // 只处理正向Tab（不按Shift的情况）
    if (e.key === 'Tab' && !e.shiftKey) {
      e.preventDefault(); // 阻止默认Tab行为，避免触发额外的焦点跳转
      passwordInputRef.current?.focus(); // 直接聚焦到密码框
    }
  };
  
  // 在组件中使用
  <TextBox email onKeyDown={handleEmailTabPress} />
  <TextBox password ref={passwordInputRef} />
  

  注意：如果你的自定义<TextBox>没有暴露内部<Input>的ref，需要先给组件加上ref转发：

  // 改造TextBox组件，转发ref到内部Input
  const TextBox = React.forwardRef((props, ref) => {
    return <Input ref={ref} {...props} />;
  });
  

• 确认React版本和polyfill配置
  如果你用的是React 17及以上版本，默认已经不再支持IE10了，这种情况下兼容性问题会很多。建议降级到React 16.x版本（16.14.0是最后一个支持IE10的正式版），同时确保引入了必要的polyfill：比如core-js来补全ES6+的API，regenerator-runtime来支持async/await，避免因为JS特性缺失导致事件处理异常，进而影响焦点管理。

• 检查tabindex的设置
  确认你的两个<TextBox>内部的<Input>没有被手动设置了不合理的tabindex值。比如如果给邮箱框设了tabindex="2"，密码框设了tabindex="1"，或者其中一个设了大于0的值，都会打乱浏览器默认的Tab导航顺序。正常情况下不需要手动设置tabindex，让浏览器按照DOM渲染顺序处理就好；如果必须设置，确保它们的tabindex是连续递增的（比如1和2）。

内容的提问来源于stack exchange，提问作者A. Sinha