如何在输入文本时获取textarea中光标（x、y坐标）的位置？

由于textarea没有直接提供获取光标坐标的API，我们可以通过模拟文本布局的方式间接计算，核心思路是用一个和textarea样式完全一致的隐藏辅助元素，复刻光标前的文本内容，通过定位辅助元素里的光标标记来得到坐标。

实现步骤 #

• 创建与textarea样式匹配的隐藏div，确保字体、字号、行高、内边距、宽度等属性完全一致，避免布局差异导致坐标偏差。
• 监听textarea的input、selectionchange事件，实时捕获光标位置变化。
• 截取textarea中光标之前的文本，复制到辅助div中，再插入一个用于定位的<span>标记（代表光标位置）。
• 通过getBoundingClientRect()获取span的视口坐标，再转换为相对于textarea的本地坐标（减去textarea自身的偏移量和滚动值）。

代码示例 #

<!-- HTML结构 -->
<textarea id="myTextarea" rows="5" cols="30" style="font-family: Arial; font-size: 14px; line-height: 1.5; padding: 8px; border: 1px solid #ccc; width: 300px;"></textarea>
<!-- 辅助隐藏div，样式与textarea一致 -->
<div id="helperDiv" style="position: absolute; top: -9999px; left: -9999px; font-family: Arial; font-size: 14px; line-height: 1.5; padding: 8px; border: 1px solid #ccc; width: 300px; white-space: pre-wrap; word-wrap: break-word;"></div>

const textarea = document.getElementById('myTextarea');
const helperDiv = document.getElementById('helperDiv');

function getCursorCoordinates() {
    const selection = window.getSelection();
    if (!selection.rangeCount) return null;
    
    const cursorPos = textarea.selectionStart;
    const textBeforeCursor = textarea.value.substring(0, cursorPos);
    
    // 清空辅助div，插入光标前的文本和标记span
    helperDiv.innerHTML = '';
    const textNode = document.createTextNode(textBeforeCursor);
    const cursorMarker = document.createElement('span');
    helperDiv.appendChild(textNode);
    helperDiv.appendChild(cursorMarker);
    
    // 获取标记的视口坐标并转换为textarea本地坐标
    const markerRect = cursorMarker.getBoundingClientRect();
    const textareaRect = textarea.getBoundingClientRect();
    return {
        x: markerRect.left - textareaRect.left + textarea.scrollLeft,
        y: markerRect.top - textareaRect.top + textarea.scrollTop
    };
}

// 监听光标变化事件
textarea.addEventListener('input', () => {
    const coords = getCursorCoordinates();
    coords && console.log(`光标坐标：x=${coords.x.toFixed(2)}px, y=${coords.y.toFixed(2)}px`);
});
textarea.addEventListener('selectionchange', () => {
    const coords = getCursorCoordinates();
    coords && console.log(`光标坐标：x=${coords.x.toFixed(2)}px, y=${coords.y.toFixed(2)}px`);
});

注意事项 #

• 必须保证辅助div的样式与textarea完全匹配，包括white-space属性（建议设为pre-wrap，和textarea默认换行行为一致）。
• 当textarea存在滚动时，需要加上scrollTop和scrollLeft修正坐标，避免滚动导致的偏移。
• 对于制表符这类特殊字符，需要在辅助div中做对应处理（比如把\t替换为4个空格），否则布局会出现偏差。

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