Firefox中getSelection返回focusOffset值异常的问题求助

这个问题是Firefox在keydown事件触发时机的选区处理逻辑和其他浏览器不一致导致的。当你用Ctrl/Cmd+A全选内容后按下按键，keydown事件触发时，Firefox的选区可能还未完成完整的更新，导致focusOffset没有正确指向选区末尾，而是临时返回了1。

解决方法1：改用keyup事件 #

将事件监听从keydown改为keyup，此时按键操作已完成，选区状态稳定，能正确获取到focusOffset的值：

document.querySelector('div').addEventListener('keyup', () => {
  console.log(window.getSelection().focusOffset);
});

console.log('ready');

解决方法2：在keydown中延迟获取选区 #

如果必须使用keydown事件，可以通过setTimeout延迟一小段时间再获取选区，给Firefox足够的时间完成选区更新：

document.querySelector('div').addEventListener('keydown', () => {
  setTimeout(() => {
    console.log(window.getSelection().focusOffset);
  }, 0); // 0延迟即可让浏览器先处理选区更新
});

console.log('ready');

解决方法3：手动计算选区长度（备选方案） #

如果需要更可靠的结果，也可以直接计算选区的实际文本长度，避免依赖focusOffset：

document.querySelector('div').addEventListener('keydown', () => {
  const selection = window.getSelection();
  const targetDiv = document.querySelector('div');
  if (selection.toString().length === targetDiv.textContent.length) {
    console.log(targetDiv.textContent.length);
  } else {
    console.log(selection.focusOffset);
  }
});

console.log('ready');

这些方法都能解决Firefox中focusOffset返回异常的问题，优先推荐第一种改用keyup的方案，逻辑更简洁且符合事件触发的自然流程。

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