聚焦元素后range.getClientRects返回空，如何无需输入获取有效矩形？

安全阿岳

2026-8-2

解决focus后选区getClientRects返回空的问题

问题原因

浏览器的JS执行与UI渲染共享单线程，在同步任务中完成focus和选区设置后立即调用getClientRects()时，浏览器尚未完成选区的布局渲染，因此返回空列表。而onInput事件触发时，浏览器已经完成了相关渲染流程，所以能拿到有效结果。

解决方案

方案1：使用`requestAnimationFrame`延迟获取

将获取选区rect的逻辑放到requestAnimationFrame回调中，它会在浏览器下一次重绘前执行，此时选区的布局已完成：

const selection = window.getSelection();

if (!selection) return;

// 延迟到下一次渲染周期获取rect
requestAnimationFrame(() => {
  const range = selection.getRangeAt(0).cloneRange();
  range.collapse(true);

  const rect = range.getClientRects()[0];
  // 在此处使用rect
  console.log(rect);
});

方案2：强制浏览器同步重排

在设置选区后，读取元素的布局属性（如offsetHeight）强制浏览器立即完成重排，之后再获取rect：

const selectEnd = (element: HTMLElement, position: number) => {
  element.focus();
  
  const range = document.createRange();
  const sel = window.getSelection();

  if (position !== -1) {
    range.setStart(element, Math.min(position, element.childNodes.length));
  } else {
    range.setStart(element, element.childNodes.length);
  }

  sel?.removeAllRanges();
  sel?.addRange(range);
  
  // 读取offsetHeight触发同步重排
  element.offsetHeight;
};