Range.selectNodeContents在Firefox中失效但Chrome正常，求解决方案

嘿，这个坑我之前踩过！Firefox对选区和复制操作的处理确实比Chrome要严格一些，咱们把代码调整一下就能搞定：

核心问题 #

Chrome会自动把你创建的Range关联到当前选区，但Firefox需要显式地将Range添加到Selection对象中，而且复制操作必须在用户触发的同步事件回调里执行（比如click事件的直接回调，别嵌套过多异步逻辑）。

修复后的完整代码 #

document.querySelector(".copy").onclick = function () {
  const referenceNode = document.querySelector(".foobar");
  const selection = window.getSelection();
  const range = document.createRange();

  // 选中目标节点的全部内容
  range.selectNodeContents(referenceNode);

  // 清空现有选区，避免之前的选中状态干扰
  selection.removeAllRanges();
  // 关键步骤：把Range添加到选区中，Firefox必须显式做这一步
  selection.addRange(range);

  try {
    // 执行复制命令
    const isCopied = document.execCommand('copy');
    if (!isCopied) {
      console.log('复制失败，请检查目标节点状态');
    }
  } catch (error) {
    console.error('复制过程出错:', error);
  } finally {
    // 清空选区，避免页面上残留选中高亮，提升体验
    selection.removeAllRanges();
  }
};

额外注意事项 #

• 如果你的目标节点是隐藏元素（比如display: none），Firefox也会拒绝复制，这时候可以临时把元素设为visibility: hidden+position: absolute（保持布局不被打乱），复制后再恢复原样式。
• 确保复制操作是在用户主动触发的事件（比如click、keydown）中执行，浏览器的安全策略会阻止非用户触发的复制操作。

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