聚焦时调用execCommand('selectall')选中元素内容失败，选中整个文档

这个问题我之前踩过坑！你遇到的情况是因为document.execCommand('selectall')的行为依赖当前浏览器的选区上下文，当focusin事件触发时，浏览器还没完成将选区切换到目标contenteditable元素的操作，直接调用它就会默认选中整个文档内容。

给你两种可行的解决方案：

方案1：延迟执行selectall（快速修复） #

利用setTimeout把选中操作推迟到事件循环的下一轮，让浏览器先完成焦点切换和选区上下文的更新：

focusin(e) {
  console.log("focusin");
  setTimeout(() => {
    document.execCommand("selectall");
  }, 0);
}

方案2：使用现代Selection API（推荐） #

document.execCommand已经被标记为废弃API，更可靠的方式是直接通过Selection API手动创建选区，精准选中当前元素的内容：

focusin(e) {
  console.log("focusin");
  const targetElement = e.target as HTMLElement;
  const selection = window.getSelection();
  const range = document.createRange();
  
  // 选中目标元素的全部内容
  range.selectNodeContents(targetElement);
  
  // 清空原有选区并添加新范围
  selection?.removeAllRanges();
  selection?.addRange(range);
}

这种方式不依赖浏览器的默认上下文，无论何时调用都能精准选中目标元素的内容，兼容性也覆盖了所有现代浏览器。

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