本文提供一种基于浏览器原生文本布局测量的可靠方案，通过创建隐藏的 dom 元素模拟光标位置，准确判断 textarea 中光标当前所在行是否为首行或末行，适用于动态高度、无换行符的自动换行场景。
在实现多行 textarea 的键盘导航（如上下箭头切换相邻 textarea）时，一个常见但棘手的需求是：仅当光标位于当前 textarea 的视觉首行时，↑ 键才应跳转至上一个 textarea；仅当光标位于视觉末行时，↓ 键才应跳转至下一个 textarea。难点在于：用户输入可能触发自动换行（word wrap），而非显式换行符 \n，因此无法通过统计 \n 或简单分割字符串解决；同时，textarea.scrollHeight、clientHeight 或 offsetHeight 等尺寸属性无法直接映射光标所在的“逻辑行”。
关键洞察在于：浏览器渲染引擎已精确知道每个字符在换行后的视觉位置——我们可借助这一能力，无需逆向工程底层逻辑，而是通过「测量法」间接获取光标所在行信息。
✅ 推荐方案：利用 Range + getBoundingClientRect() 进行像素级定位
核心思路是：
- 在光标位置插入一个零宽、不可见的 （通过 document.execCommand('insertHTML') 或更现代的 InputEvent 模拟已不推荐）；
- 更安全可靠的做法是：克隆 textarea 的样式，创建一个内容相同的只读 ，在其光标前位置插入一个带唯一 ID 的
或 ，再测量该元素的 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); // 截取光标前文本（含换行符），并用标记光标位置（避免影响布局） const beforeText = value.substring(0, selectionStart); div.innerHTML = beforeText.replace(/\n/g, '
') + ''; // 获取光标位置的垂直偏移（即首行 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, '
'); 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(); // 自定义跳转逻辑 } } });⚠️ 注意事项与最佳实践
-
样式一致性至关重要：临时 必须完全继承 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，但通过复刻渲染环境 + 像素测量，我们能以高精度还原其内部布局逻辑。该方法不依赖换行符、不猜测字体度量、不侵入用户输入流程，是目前最健壮的解决方案。对于追求专业体验的表单交互，它平衡了功能需求与可访问性底线。
