如何获取输入框、文本域中焦点的像素坐标（相对窗口左上角{x,y}）

刚好之前做过类似的需求——要在输入框的文本光标位置弹出自定义弹窗，必须精准拿到相对于窗口左上角的像素坐标。下面我就分享一个兼容主流浏览器的实现方案，专门针对input和textarea这类输入控件。

核心思路 #

要拿到光标相对于窗口的坐标，需要两步：

1. 获取光标在输入控件内部的位置偏移
2. 结合控件本身在视口中的位置，计算出最终的窗口坐标

这里要注意：我们需要的是文本光标的位置，不是控件本身的焦点位置，所以不能直接拿控件的整体位置来用。

实现代码（jQuery环境） #

我封装了一个工具函数，直接传入jQuery选择的输入控件就能返回坐标：

function getCursorWindowPosition($input) {
    const inputEl = $input[0]; // 转成原生DOM元素
    let cursorRect;

    // 只处理input和textarea控件
    if (!['INPUT', 'TEXTAREA'].includes(inputEl.tagName)) {
        console.warn('该函数仅支持input/textarea控件');
        return null;
    }

    try {
        const cursorIndex = inputEl.selectionStart; // 获取光标所在的字符索引
        let range;

        // 兼容IE和现代浏览器的文本范围创建
        if (inputEl.createTextRange) {
            // IE浏览器处理逻辑
            range = inputEl.createTextRange();
            range.moveStart('character', cursorIndex);
            range.moveEnd('character', cursorIndex);
            cursorRect = range.getBoundingClientRect();
        } else {
            // 现代浏览器（Chrome/Firefox等）
            range = document.createRange();
            range.setStart(inputEl, cursorIndex);
            range.setEnd(inputEl, cursorIndex);
            cursorRect = range.getBoundingClientRect();
        }

        // getBoundingClientRect()返回的left/top就是相对于窗口左上角的坐标
        return {
            x: Math.round(cursorRect.left),
            y: Math.round(cursorRect.top)
        };
    } catch (err) {
        console.error('获取光标位置失败:', err);
        return null;
    }
}

如何使用 #

比如给一个输入框绑定focus或者input事件，实时获取光标位置：

// 监听input的焦点及输入事件
$('#username-input').on('focus input', function() {
    const cursorPos = getCursorWindowPosition($(this));
    if (cursorPos) {
        console.log('光标窗口坐标：X=' + cursorPos.x + ', Y=' + cursorPos.y);
        // 这里就可以用这个坐标来定位弹窗了
        // 比如设置弹窗的样式：position: fixed; left: cursorPos.x + 'px'; top: cursorPos.y + 20 + 'px';
    }
});

注意事项 #

• 滚动兼容：如果页面或者textarea有滚动条，getBoundingClientRect()会自动考虑滚动后的实际视口位置，不需要额外计算滚动偏移
• 特殊输入类型：对于type="password"的输入框，部分浏览器可能限制获取光标位置，需要测试兼容
• 可见性要求：必须确保输入控件处于可见状态（display: none或者visibility: hidden的控件无法获取有效坐标）

如果你的需求是获取控件本身的焦点位置（而非文本光标），那更简单，直接拿控件的视口位置即可：

function getInputFocusPosition($input) {
    const rect = $input[0].getBoundingClientRect();
    return {
        x: rect.left,
        y: rect.top
    };
}

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