如何用JS或jQuery判断textarea光标是否在首行或末行？

算力阿峰

2026-5-25

判断textarea光标是否在首行或末行的实现方案

嘿，这个需求我之前做富文本相关功能的时候刚好碰到过，其实用原生DOM API就能轻松搞定，我给你一步步拆解清楚：

核心思路

要判断光标是否处于内容的最顶端（首行）或最底端（末行），我们需要三步：

获取当前光标在文本中的精确索引位置
计算光标所在的行号
把当前行号和总行数对比，就能判断是否在首尾行

具体实现代码

下面是封装好的工具函数，直接就能用，还考虑了各种边界情况：

function isCursorAtEdge(textareaEl) {
    const content = textareaEl.value;
    const cursorPos = textareaEl.selectionStart;
    
    // 处理空内容的特殊情况
    if (!content) {
        // 空textarea里光标既在首行也在末行
        return { isTop: true, isBottom: true };
    }

    // 计算光标所在行号：统计开头到光标位置的换行符数量，+1就是当前行号（首行算第1行）
    const textBeforeCursor = content.slice(0, cursorPos);
    const currentLine = (textBeforeCursor.match(/\n/g)?.length || 0) + 1;

    // 计算总行数：统计整个内容的换行符数量，+1就是总行数
    const totalLines = (content.match(/\n/g)?.length || 0) + 1;

    return {
        isTop: currentLine === 1,
        isBottom: currentLine === totalLines
    };
}

实际使用示例

比如你有一个id为myTextarea的textarea元素，可以在光标移动或输入时监听状态：

const textarea = document.getElementById('myTextarea');
// 监听光标移动/输入事件
textarea.addEventListener('input', () => {
    const edgeStatus = isCursorAtEdge(textarea);
    console.log('是否在首行：', edgeStatus.isTop);
    console.log('是否在末行：', edgeStatus.isBottom);
});