如何获取textarea自动换行信息以定位邮件联想补全列表？

这问题我之前也帮不少开发者解决过——textarea的软换行确实坑人，因为它不会在DOM里留下任何换行标记，纯靠浏览器渲染时自动拆分，所以直接从字符数算坐标根本行不通。不过别担心，有个非常靠谱的方法能搞定这个：用样式完全匹配的隐藏模拟元素来模拟textarea的换行行为，从而定位光标坐标。

核心思路 #

textarea的自动换行（软换行）规则和设置了white-space: pre-wrap; word-wrap: break-word;的div完全一致。我们可以创建一个和textarea样式1:1匹配的隐藏div，把光标前的文本复制进去，再在末尾加一个不可见的标记元素，最后通过这个标记的位置来反推textarea里光标的真实坐标。

具体实现代码 #

function getTextareaCursorCoords(textarea) {
  // 1. 创建模拟div，完全复刻textarea的样式
  const mockDiv = document.createElement('div');
  const textareaStyle = window.getComputedStyle(textarea);

  // 关键样式：保证换行规则和textarea一致
  mockDiv.style.whiteSpace = 'pre-wrap';
  mockDiv.style.wordWrap = 'break-word';
  // 复制所有影响布局的样式
  mockDiv.style.position = 'absolute';
  mockDiv.style.visibility = 'hidden';
  mockDiv.style.width = textareaStyle.width;
  mockDiv.style.height = textareaStyle.height;
  mockDiv.style.fontFamily = textareaStyle.fontFamily;
  mockDiv.style.fontSize = textareaStyle.fontSize;
  mockDiv.style.padding = textareaStyle.padding;
  mockDiv.style.border = textareaStyle.border;
  mockDiv.style.lineHeight = textareaStyle.lineHeight;
  mockDiv.style.boxSizing = textareaStyle.boxSizing; // 重要，避免padding/border影响宽度

  // 2. 把光标前的文本放入div，并添加光标标记
  const cursorIndex = textarea.selectionStart;
  const textBeforeCursor = textarea.value.substring(0, cursorIndex);
  mockDiv.textContent = textBeforeCursor;
  
  const cursorMarker = document.createElement('span');
  cursorMarker.id = 'cursor-marker';
  // 给标记加个极小的宽度，避免影响布局
  cursorMarker.style.display = 'inline-block';
  cursorMarker.style.width = '1px';
  cursorMarker.style.height = '1px';
  mockDiv.appendChild(cursorMarker);

  // 3. 插入到文档中，获取坐标后移除
  document.body.appendChild(mockDiv);
  const markerRect = cursorMarker.getBoundingClientRect();
  const textareaRect = textarea.getBoundingClientRect();
  document.body.removeChild(mockDiv);

  // 4. 计算相对于textarea内部的坐标（考虑滚动偏移）
  return {
    x: markerRect.left - textareaRect.left + textarea.scrollLeft,
    y: markerRect.top - textareaRect.top + textarea.scrollTop + markerRect.height
  };
}

关键注意事项 #

• 样式完全匹配：必须确保模拟div的所有布局相关样式（字体、宽度、padding、border、box-sizing等）和textarea完全一致，否则换行位置会有偏差。
• 滚动偏移处理：如果textarea有滚动条，需要用scrollTop和scrollLeft调整坐标，因为getBoundingClientRect()返回的是相对于视口的位置，而我们需要的是textarea内部的光标位置。
• 特殊字符兼容：这个方法能自动处理不同宽度的字符（比如中文、英文、emoji），因为模拟元素的渲染和textarea完全一致，比手动计算字符宽度靠谱得多。

使用场景 #

拿到光标坐标后，你就可以把补全候选列表定位在y坐标下方，x坐标对齐光标位置，完美实现邮件联想补全的交互效果。

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