通用选中文本定位方法求助：input内选中文本位置检测失效

嘿，这个问题我太有共鸣了！之前用普通的window.getSelection()处理选区时，也踩过表单元素（input/textarea）的坑——它们的选区机制和普通DOM文本节点完全是两套体系，难怪之前的代码会失效甚至返回0。下面给你一套通用的解决方案，既能处理普通页面文本，也能兼容input/textarea里的选中内容，完美适配mouseup或dblclick触发tooltip的场景。

核心思路：区分选区目标类型 #

浏览器对普通DOM元素和表单控件的选区处理是分开的：

• 普通元素（p、div等）：用window.getSelection() + Range API获取选区信息和位置
• 表单元素（input[type=text]、textarea）：用元素自身的selectionStart/selectionEnd属性获取选区范围，再通过模拟计算得到位置

步骤1：编写通用的选区信息获取函数 #

这个函数会自动判断选区目标，返回包含选区范围、坐标的对象：

function getSelectedTextInfo() {
  const selectionInfo = {
    text: '',
    start: 0,
    end: 0,
    rect: null, // 选区的位置矩形（含top/left/width/height）
    target: null // 选中文本所在的元素
  };

  // 先处理表单元素的情况
  const activeElement = document.activeElement;
  if (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA') {
    selectionInfo.target = activeElement;
    selectionInfo.start = activeElement.selectionStart;
    selectionInfo.end = activeElement.selectionEnd;
    selectionInfo.text = activeElement.value.substring(selectionInfo.start, selectionInfo.end);

    if (selectionInfo.start !== selectionInfo.end) {
      // 计算input/textarea中选中文本的位置：创建临时元素模拟
      const tempSpan = document.createElement('span');
      // 复制input的样式，保证文本宽度计算准确
      const computedStyle = window.getComputedStyle(activeElement);
      tempSpan.style.font = computedStyle.font;
      tempSpan.style.padding = computedStyle.padding;
      tempSpan.style.border = computedStyle.border;
      tempSpan.style.position = 'absolute';
      tempSpan.style.visibility = 'hidden';
      tempSpan.style.whiteSpace = 'pre'; // 处理空格和换行

      // 把选中的文本和前面的文本都放进去，计算偏移
      tempSpan.textContent = activeElement.value.substring(0, selectionInfo.end);
      document.body.appendChild(tempSpan);
      const endRect = tempSpan.getBoundingClientRect();
      
      tempSpan.textContent = activeElement.value.substring(0, selectionInfo.start);
      const startRect = tempSpan.getBoundingClientRect();

      // 计算选中区域的实际位置
      selectionInfo.rect = {
        top: activeElement.getBoundingClientRect().top,
        left: startRect.right,
        width: endRect.right - startRect.right,
        height: activeElement.getBoundingClientRect().height,
        bottom: activeElement.getBoundingClientRect().bottom
      };

      document.body.removeChild(tempSpan);
    }
    return selectionInfo;
  }

  // 处理普通DOM元素的情况
  const selection = window.getSelection();
  if (selection.rangeCount > 0) {
    const range = selection.getRangeAt(0);
    selectionInfo.text = selection.toString();
    selectionInfo.start = range.startOffset;
    selectionInfo.end = range.endOffset;
    selectionInfo.target = range.startContainer.parentNode;
    selectionInfo.rect = range.getBoundingClientRect();
  }
  return selectionInfo;
}

步骤2：监听事件并显示Tooltip #

在mouseup或dblclick事件触发时，调用上面的函数，然后根据返回的rect位置设置tooltip的显示：

// 先创建一个tooltip元素
const tooltip = document.createElement('div');
tooltip.style.position = 'fixed';
tooltip.style.background = '#333';
tooltip.style.color = '#fff';
tooltip.style.padding = '4px 8px';
tooltip.style.borderRadius = '4px';
tooltip.style.display = 'none';
tooltip.style.zIndex = '9999';
document.body.appendChild(tooltip);

// 监听事件
function handleSelection(e) {
  // 防止右键菜单触发的mouseup
  if (e.button === 2) return;

  const info = getSelectedTextInfo();
  if (!info.text || !info.rect) {
    tooltip.style.display = 'none';
    return;
  }

  // 设置tooltip内容和位置（可以根据需要调整偏移，比如往下移一点）
  tooltip.textContent = `选中了 ${info.text.length} 个字符`;
  tooltip.style.left = `${info.rect.left + window.scrollX}px`;
  tooltip.style.top = `${info.rect.bottom + window.scrollY + 4}px`;
  tooltip.style.display = 'block';

  // 点击页面其他地方隐藏tooltip
  document.addEventListener('click', hideTooltip, { once: true });
}

function hideTooltip() {
  tooltip.style.display = 'none';
}

document.addEventListener('mouseup', handleSelection);
document.addEventListener('dblclick', handleSelection);

关键注意点 #

• 表单元素的样式模拟：必须复制input/textarea的字体、内边距等样式，否则临时元素的宽度计算会偏差，导致位置不准确
• 边界处理：如果tooltip超出视口，可以额外判断info.rect.right是否接近窗口宽度，调整tooltip的left位置（比如改成window.innerWidth - tooltip.offsetWidth）
• 空选区过滤：一定要判断info.text是否为空，避免选中0字符时显示tooltip
• 滚动偏移：设置tooltip位置时要加上window.scrollX和window.scrollY，否则滚动页面后tooltip会错位

这样处理后，不管是普通页面文本还是input/textarea里的选中内容，都能准确获取位置并显示tooltip啦！

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