本文介绍如何通过监听文本域光标位置，动态计算当前行号，并实时高亮左侧行号栏中对应行号的背景色，解决仅点击生效、无法响应键盘导航及样式残留等问题。
本文介绍如何通过监听文本域光标位置，动态计算当前行号，并实时高亮左侧行号栏中对应行号的背景色，解决仅点击生效、无法响应键盘导航及样式残留等问题。
在构建类编辑器 UI（如带行号的
- 事件绑定不全：仅监听 'click'，遗漏 'input'、'keydown'、'keyup' 等关键光标变化事件；
- 样式未清理：每次高亮新行前未清除旧高亮，导致多行残留背景；
- 布局兼容性缺陷：.numbers span 默认为 inline 元素，background-color 无法正确撑开（需显式设为 display: block 或 inline-block 并确保高度一致）。
以下是优化后的完整实现方案：
✅ 正确计算当前行号
function getCurrentLineNumber(textarea) {
const pos = textarea.selectionStart;
const text = textarea.value;
if (text.length === 0) return 1;
// 使用 \n 分割并累加每行长度（含换行符）
let line = 1;
let offset = 0;
for (let i = 0; i < text.length && offset < pos; i++) {
if (text[i] === '\n') {
line++;
offset = i + 1; // 下一行起始偏移
}
}
return line;
}✅ 优势：逻辑简洁、避免 findIndex 边界错误；支持空行、末尾无换行等边界场景。
✅ 统一高亮与清理逻辑
let activeLineSpan = null;
function highlightLineNumber(lineNumber) {
const numbers = document.querySelector('.editor > .numbers');
const spans = numbers.querySelectorAll('span');
// 清除之前高亮
if (activeLineSpan) {
activeLineSpan.style.backgroundColor = '';
activeLineSpan.style.color = '#888';
}
// 高亮目标行（注意：lineNumber 从 1 开始，索引从 0 开始）
if (lineNumber > 0 && lineNumber <= spans.length) {
activeLineSpan = spans[lineNumber - 1];
activeLineSpan.style.backgroundColor = '#4a5568'; // 深灰底色，对比度佳
activeLineSpan.style.color = '#fff';
activeLineSpan.style.display = 'block'; // 关键：确保背景可渲染
}
}✅ 全场景事件监听（推荐）
const textarea = document.getElementById('textarea');
// 初始化行号栏
function initLineNumbers() {
updateRowNumbering();
highlightLineNumber(getCurrentLineNumber(textarea));
}
// 实时响应所有光标变化
['input', 'click', 'keydown', 'keyup', 'focus'].forEach(event => {
textarea.addEventListener(event, () => {
highlightLineNumber(getCurrentLineNumber(textarea));
});
});
// 可选：支持鼠标拖拽选中时持续更新
textarea.addEventListener('select', () => {
setTimeout(() => {
highlightLineNumber(getCurrentLineNumber(textarea));
}, 0);
});✅ CSS 补充建议（增强视觉一致性）
.numbers span {
counter-increment: linenumber;
display: block; /* 必须！否则 background 不生效 */
padding: 0 8px; /* 左右留白，提升可读性 */
margin: 0; /* 消除默认 margin 干扰 */
min-height: 21px; /* 匹配 textarea line-height */
box-sizing: border-box;
}⚠️ 注意事项
- 性能考量：input 事件高频触发，但本方案中 getCurrentLineNumber 时间复杂度为 O(n)，对千行以内文本无压力；若需极致性能，可缓存行偏移数组并在 input 时增量更新。
- 滚动同步：当前方案不处理滚动条联动，如需行号随内容滚动“吸附”，需监听 scroll 事件并调整 .numbers 的 transform: translateY()。
- 无障碍支持：高亮行号建议添加 aria-current="line" 属性，提升屏幕阅读器体验。
通过以上改造，行号高亮将真正实现实时、稳定、专业级响应——无论用户是点击、键盘导航、粘贴还是拖拽选中，左侧行号栏总能精准指示光标所在逻辑行，为自定义编辑器奠定坚实基础。
