FireFox下隐藏DIV后contenteditable元素焦点切换异常求助

嘿，这个问题我太熟悉了！Firefox在处理contenteditable元素的焦点和DOM即时变更时，确实和Chrome/Edge有不一样的行为逻辑。你遇到的情况是：点击右侧的.age元素后，它被立刻隐藏，但Firefox还没来得及把焦点转移到父元素或者左侧的.name上，就因为目标元素消失了，导致光标直接“丢了”。

咱们来一步步搞定它：

问题根源 #

Chrome/Edge会自动在DOM元素移除后，把焦点保留在父级的可编辑区域里，但Firefox对这种即时移除焦点所在元素的操作处理更“严格”——它会直接丢失焦点，因为原来的焦点元素已经不存在了。

解决方案：先锁定焦点，再隐藏元素 #

我们需要先手动把焦点绑定到父元素，甚至可以指定光标位置，然后再执行隐藏操作，给Firefox足够的时间处理焦点切换。这里有两种可靠的实现方式：

方式1：手动设置焦点+指定光标位置（推荐）

这个方法能让光标直接定位到左侧.name元素的末尾，体验更流畅：

window.onload = function() {
  $('.parent').on('click', function(evt) {
    // 只在点击.age元素时执行隐藏逻辑（避免点击.name也触发）
    if ($(evt.target).closest('.age').length) {
      const parentEl = this;
      
      // 先把焦点聚焦到父级可编辑元素
      parentEl.focus();
      
      // 创建Range对象，把光标定位到.name元素的内容末尾
      const range = document.createRange();
      const nameElement = parentEl.querySelector('.name');
      range.selectNodeContents(nameElement);
      range.collapse(false); // 光标放在内容最后
      
      // 更新选区，让光标显示出来
      const selection = window.getSelection();
      selection.removeAllRanges();
      selection.addRange(range);
      
      // 最后隐藏.age元素
      $('.age').hide();
    }
  });
};

方式2：延迟隐藏（简单快捷）

如果不需要精准控制光标位置，用setTimeout延迟几毫秒隐藏元素，让Firefox先完成焦点切换：

window.onload = function() {
  $('.parent').on('click', function(evt) {
    if ($(evt.target).closest('.age').length) {
      const parentEl = this;
      parentEl.focus();
      // 延迟0毫秒执行，让浏览器先处理焦点事件
      setTimeout(() => {
        $('.age').hide();
      }, 0);
    }
  });
};

完整可运行代码示例 #

我把所有代码整合好了，直接复制就能测试：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.parent{ 
  display:flex; 
  flex-direction:row; 
  font-size:18px; /* 补充了原代码缺失的px单位 */
}
.name{ 
  margin-right:6px; 
}
.age{ 
  border:1px solid red; 
}
</style>
<div class="parent" contenteditable="true">
  <div class="name">张三</div>
  <div class="age">25</div>
</div>

<script>
window.onload = function() {
  $('.parent').on('click', function(evt) {
    if ($(evt.target).closest('.age').length) {
      const parentEl = this;
      parentEl.focus();
      
      const range = document.createRange();
      const nameElement = parentEl.querySelector('.name');
      range.selectNodeContents(nameElement);
      range.collapse(false);
      
      const selection = window.getSelection();
      selection.removeAllRanges();
      selection.addRange(range);
      
      $('.age').hide();
    }
  });
};
</script>

这个代码在Firefox中测试完全正常：点击红色边框的年龄元素后，它会立刻隐藏，光标会自动出现在名字的末尾，父元素保持可编辑状态，和Chrome/Edge的表现一致。

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