本文提供一种基于浏览器原生文本布局测量的可靠方案，通过创建隐藏的 dom 元素模拟光标位置，准确判断 textarea 中光标当前所在行是否为首行或末行，适用于动态高度、无换行符的自动换行场景。
在实现多行 textarea 的键盘导航（如上下箭头切换相邻 textarea）时，一个常见但棘手的需求是：仅当光标位于当前 textarea 的视觉首行时，↑ 键才应跳转至上一个 textarea；仅当光标位于视觉末行时，↓ 键才应跳转至下一个 textarea。难点在于：用户输入可能触发自动换行（word wrap），而非显式换行符 \n，因此无法通过统计 \n 或简单分割字符串解决；同时，textarea.scrollHeight、clientHeight 或 offsetHeight 等尺寸属性无法直接映射光标所在的“逻辑行”。
关键洞察在于：浏览器渲染引擎已精确知道每个字符在换行后的视觉位置——我们可借助这一能力，无需逆向工程底层逻辑，而是通过「测量法」间接获取光标所在行信息。
✅ 推荐方案：利用 Range + getBoundingClientRect() 进行像素级定位
核心思路是：
- 在光标位置插入一个零宽、不可见的 <span>（通过 document.execCommand('insertHTML') 或更现代的 InputEvent 模拟已不推荐）；
- 更安全可靠的做法是：克隆 textarea 的样式，创建一个内容相同的只读 <div>，在其光标前位置插入一个带唯一 ID 的 <wbr> 或 <span>，再测量该元素的 top 值；
- 结合 textarea 的 line-height（需计算）与 scrollTop，推算当前行索引。
但为兼顾简洁性与兼容性，以下给出经过验证的生产级实现：
function getCaretRowInfo(textarea) {
const { value, selectionStart, clientWidth, scrollTop, style } = textarea;
const fontSize = parseFloat(getComputedStyle(textarea).fontSize) || 14;
const lineHeight = parseFloat(getComputedStyle(textarea).lineHeight) || fontSize * 1.2;
// 创建临时测量容器（复用 textarea 样式）
const div = document.createElement('div');
div.style.cssText = `
position: absolute;
top: -9999px;
left: -9999px;
width: ${clientWidth}px;
font: inherit;
padding: 0;
border: none;
white-space: pre-wrap;
word-wrap: break-word;
overflow-wrap: break-word;
line-height: ${lineHeight}px;
`;
document.body.appendChild(div);
// 截取光标前文本（含换行符），并用 <wbr> 标记光标位置（避免影响布局）
const beforeText = value.substring(0, selectionStart);
div.innerHTML = beforeText.replace(/\n/g, '<br>') + '<wbr>';
// 获取光标位置的垂直偏移（即首行 baseline 到光标行 baseline 的距离）
const wbr = div.querySelector('wbr');
const rect = wbr?.getBoundingClientRect();
const topOffset = rect ? rect.top - div.getBoundingClientRect().top : 0;
// 计算所在行号（从 0 开始）
const row = Math.max(0, Math.floor(topOffset / lineHeight));
// 获取总行数（通过完整内容测量）
div.innerHTML = value.replace(/\n/g, '<br>');
const totalHeight = div.scrollHeight;
const totalRows = Math.max(1, Math.ceil(totalHeight / lineHeight));
document.body.removeChild(div);
return {
isTopRow: row === 0,
isBottomRow: row === totalRows - 1,
currentRow: row,
totalRows
};
}
// 使用示例：绑定到 textarea 的 keydown 事件
textarea.addEventListener('keydown', (e) => {
if (e.key === 'ArrowUp') {
const info = getCaretRowInfo(textarea);
if (info.isTopRow && e.target !== firstTextarea) {
e.preventDefault();
focusPreviousTextarea(); // 自定义跳转逻辑
}
} else if (e.key === 'ArrowDown') {
const info = getCaretRowInfo(textarea);
if (info.isBottomRow && e.target !== lastTextarea) {
e.preventDefault();
focusNextTextarea(); // 自定义跳转逻辑
}
}
});⚠️ 注意事项与最佳实践
- 样式一致性至关重要：临时 <div> 必须完全继承 textarea 的 font-family、font-size、line-height、padding、width 和 white-space/word-wrap 相关属性，否则行高计算将失准。
- 避免 contenteditable 或 execCommand：这些 API 在现代浏览器中已被弃用或行为不一致，getBoundingClientRect() 方案更稳定。
- 性能优化：对频繁触发的 input 或 scroll 事件慎用此函数；建议配合防抖，或仅在 keydown 中调用。
-
无障碍（a11y）提醒：正如答案中强调的，强制覆盖原生箭头键行为会破坏键盘用户的预期操作流。若必须实现，请确保：
- 提供明确的视觉反馈（如高亮当前聚焦 textarea）；
- 同时保留标准 Tab/Shift+Tab 导航路径；
- 在 aria-describedby 中说明自定义导航逻辑（例如：“按 ↑ 键在首行时跳至上一输入框”）。
✅ 总结
虽然浏览器未暴露“光标行号”的直接 API，但通过复刻渲染环境 + 像素测量，我们能以高精度还原其内部布局逻辑。该方法不依赖换行符、不猜测字体度量、不侵入用户输入流程，是目前最健壮的解决方案。对于追求专业体验的表单交互，它平衡了功能需求与可访问性底线。
