如何准确获取输入框中选中文本的位置与边界？（Firefox 52+ WebExtension）

嘿，针对Firefox 52+的WebExtension内容脚本里要计算输入框选中内容的边界这个问题，我刚好研究过——确实window.getSelection()对<input>/<textarea>这类表单控件里的选中内容完全不生效，而selectionStart/selectionEnd又只能给你字符串索引，拿不到我们需要的视觉位置和尺寸。我这里有个亲测有效的Firefox专属方案，分享给你：

核心思路 #

我们可以创建一个和目标输入框样式完全一致的隐藏容器，把选中的文本复制进去，然后通过这个容器的getBoundingClientRect()方法获取选中内容的视觉边界。这个方法能精准匹配输入框内文本的渲染效果，确保边界计算的准确性。

具体实现代码 #

function getInputSelectionBounds(inputElement) {
  // 先判断是否有选中内容
  if (inputElement.selectionStart === inputElement.selectionEnd) {
    return null; // 无选中内容时返回null
  }

  // 提取选中的文本片段
  const selectedText = inputElement.value.substring(
    inputElement.selectionStart,
    inputElement.selectionEnd
  );

  // 创建用于模拟渲染的隐藏span
  const tempSpan = document.createElement('span');
  const inputStyle = window.getComputedStyle(inputElement);

  // 设置span样式与输入框完全一致，保证渲染匹配
  tempSpan.style.position = 'absolute';
  tempSpan.style.visibility = 'hidden';
  tempSpan.style.whiteSpace = 'pre'; // 保留空白字符的渲染格式
  // 复制字体相关样式
  tempSpan.style.fontFamily = inputStyle.fontFamily;
  tempSpan.style.fontSize = inputStyle.fontSize;
  tempSpan.style.fontWeight = inputStyle.fontWeight;
  tempSpan.style.fontStyle = inputStyle.fontStyle;
  tempSpan.style.lineHeight = inputStyle.lineHeight;
  // 复制内边距、边框和盒模型，确保文本位置一致
  tempSpan.style.padding = inputStyle.padding;
  tempSpan.style.border = inputStyle.border;
  tempSpan.style.boxSizing = inputStyle.boxSizing;

  // 插入选中的文本
  tempSpan.textContent = selectedText;

  // 必须将span插入DOM才能计算正确尺寸
  document.body.appendChild(tempSpan);

  // 获取选中内容的绝对边界
  const absoluteBounds = tempSpan.getBoundingClientRect();
  // 计算相对于输入框的相对位置（可选，根据需求使用）
  const inputBounds = inputElement.getBoundingClientRect();
  const relativeBounds = {
    top: absoluteBounds.top - inputBounds.top,
    left: absoluteBounds.left - inputBounds.left,
    width: absoluteBounds.width,
    height: absoluteBounds.height,
    absolute: absoluteBounds // 保留绝对位置信息
  };

  // 移除临时元素，清理DOM
  document.body.removeChild(tempSpan);

  return relativeBounds;
}

// 使用示例：获取当前焦点输入框的选中边界
const activeInput = document.activeElement;
if (['INPUT', 'TEXTAREA'].includes(activeInput.tagName)) {
  const selectionBounds = getInputSelectionBounds(activeInput);
  if (selectionBounds) {
    console.log('选中内容绝对位置:', selectionBounds.absolute);
    console.log('相对于输入框的位置:', selectionBounds);
  }
}

关键细节说明 #

• 样式完全复制：一定要把输入框的字体、内边距、盒模型等样式全部复制给临时span，否则文本渲染会和输入框不一致，导致边界计算出错。
• whiteSpace: 'pre'：这个属性能确保输入框里的空格、换行符等空白字符的渲染效果和span完全一致，避免尺寸偏差。
• 临时元素的生命周期：必须把span插入到DOM中才能让浏览器计算正确的尺寸，获取完边界后要立即移除，避免污染页面DOM。
• WebExtension兼容性：这个方案在Firefox 52+的内容脚本中可以直接使用，不需要申请额外的权限。

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