跨浏览器表单焦点异常快速切换问题技术求助

嘿，这个焦点来回跳的问题确实挺闹心的——我之前也遇到过类似的跨浏览器焦点冲突问题，结合你提供的代码和问题描述，来帮你梳理下可能的原因和修复办法：

问题根源分析 #

这种焦点在两个字段间快速切换的现象，本质上是焦点事件被重复触发了，结合你的Angular代码，大概率和这几个点有关：

• ng-if + ng-repeat 导致的DOM频繁重建：你在字段循环里用了ng-if="section.questions[$index-1].valid || $first"，每当字段验证状态变化，对应的DOM元素会被销毁再重建，这会干扰浏览器的焦点管理逻辑
• 自定义dynamic-question组件的焦点逻辑：这个组件可能在初始化或模型更新时自动调用了focus()，和原生的焦点事件形成了循环触发
• 动画效果的干扰：animate-if类的动画可能延迟了DOM的可见性状态，导致浏览器对焦点目标的判断出现偏差

具体修复步骤 #

1. 替换ng-if为ng-show减少DOM变动 #

ng-if会直接销毁DOM节点，而ng-show只是隐藏元素，能避免重建带来的焦点混乱：

<!-- 把ng-if改成ng-show，保留DOM结构 -->
<div class="row sectionLine" layout="row" id='personal_{{$index}}' layout-align="start center" 
     ng-repeat="personalQuestion in section.questions track by $index" 
     ng-show="section.questions[$index-1].valid || $first" 
     ng-class="{'animate-if':$index!=0}">

如果业务逻辑必须用ng-if，那把track by $index改成track by personalQuestion.id（假设每个问题有唯一ID），这样DOM重建时能准确关联到对应的元素：

ng-repeat="personalQuestion in section.questions track by personalQuestion.id"

2. 检查dynamic-question组件的自动聚焦逻辑 #

打开你的dynamic-question组件代码，找一找有没有类似element.focus()的代码——很多自定义表单组件会默认自动聚焦，但这在循环渲染的场景下容易出问题。可以给这段逻辑加个判断，只在用户主动交互（比如点击）或者第一次加载时触发：

// 在dynamic-question组件的控制器或链接函数中修改
if (isFirstLoad || userInitiatedFocus) {
  $element[0].querySelector('input, select, textarea').focus();
}

另外，检查组件有没有监听blur事件后又强制设置焦点的逻辑，这很容易形成循环。

3. 临时禁用动画排查问题 #

动画有时候会干扰DOM的状态判定，先把animate-if类去掉测试一下：

ng-class="{}"

如果问题消失了，那就是动画的锅。可以调整动画的触发时机，比如用Angular的$animate服务监听动画结束事件，在动画完成后再处理焦点相关操作：

$animate.on('close', $element, function() {
  // 动画结束后再执行焦点相关逻辑
});

4. 全局拦截重复焦点事件（兜底方案） #

如果上面的方法都没解决，试试添加一个全局的焦点事件拦截器，防止同一个元素被重复聚焦：

angular.module('yourApp').run(function($document) {
  let lastFocused = null;
  $document.on('focus', function(e) {
    if (lastFocused === e.target) {
      e.preventDefault();
    }
    lastFocused = e.target;
  });
});

调试小技巧 #

• 先测试一个非问卷来源的字段，排除JSON数据的影响
• 在Chrome DevTools的Elements面板，观察点击字段时DOM元素的创建/销毁情况
• 用Sources面板的Event Listener Breakpoints，勾选focus和blur，跟踪事件触发顺序，找到循环的起点

内容的提问来源于stack exchange，提问作者P.Doohan