Firefox中window.getSelection()获取textarea ID遇focusNode为null兼容问题求助

Firefox 与 Chrome 对 window.getSelection() 的处理存在核心差异：

• Chrome 会将 <textarea> 的内容解析为可访问的 DOM 节点，即便点击按钮时 <textarea> 失去焦点，仍能通过 focusNode 获取关联节点。
• Firefox 中 <textarea> 属于特殊替换元素，内部内容不会暴露给 window.getSelection()；当点击按钮时，焦点从 <textarea> 转移到按钮，此时选区直接被清空，导致 focusNode 为 null。

最可靠的方式是通过监听 <textarea> 的焦点事件，主动记录当前活跃的 <textarea> 实例，完全避开选区 API 的兼容性问题：

实现代码 #

// 存储当前活跃的textarea实例
let activeTextarea = null;

// 给所有textarea绑定焦点事件
document.querySelectorAll('textarea').forEach(textarea => {
  textarea.addEventListener('focus', () => {
    activeTextarea = textarea;
  });
});

// 绑定插入标签按钮的点击事件
document.getElementById('insert-tag-btn').addEventListener('click', () => {
  if (!activeTextarea) return;
  
  // 获取目标textarea的ID
  const targetId = activeTextarea.id;
  // 执行插入标签逻辑（示例：在光标位置插入自定义标签）
  insertTag(activeTextarea, '[自定义标签]');
});

// 封装插入标签的工具函数
function insertTag(textarea, tagContent) {
  const startPos = textarea.selectionStart;
  const endPos = textarea.selectionEnd;
  const originalValue = textarea.value;
  
  // 拼接插入标签后的内容
  textarea.value = originalValue.slice(0, startPos) + tagContent + originalValue.slice(endPos);
  
  // 恢复光标到标签后方，提升用户体验
  textarea.selectionStart = textarea.selectionEnd = startPos + tagContent.length;
  // 可选：重新聚焦textarea
  textarea.focus();
}

额外说明 #

• 该方案不依赖选区 API，兼容性覆盖所有主流浏览器（Firefox、Chrome、Edge 等）。
• <textarea> 的 selectionStart 和 selectionEnd 是标准属性，可直接获取光标或选区位置，无需依赖浏览器的选区对象。

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