1. 先说说这东西是干嘛的前阵子在搞一个内部小工具需要一个能输入多行命令序列的面板。普通 textarea 倒是能用但问题在于我看不清当前到底编辑到第几行——尤其是脚本稍微长一点30 行 50 行往后想定位某一行就全靠肉眼数数错是家常便饭。当时脑子里第一个想法就是要是有个编辑器那样的行号就好了。去翻了翻 GitHub 上的现成组件说实话能用的库不是没有但要么体积太大为了个行号引入一个编辑器全家桶要么样式跟我的页面格格不入改起来比我自己写一个还费劲。想了半天干脆自己撸一个带序号的输入框专门给自己用。这个记录就是当时从零实现这个组件时踩的坑、做的取舍、以及最终的完整代码。如果你也在琢磨类似的小组件可以直接拿走这套思路。2. 方案对比与选型动手之前我在脑子里过了一遍市面上常见的几种实现路子每种的坑都大概有数这里把对比列出来。2.1 方案一text areas 配覆盖层这个思路最容易理解一个外层容器做 relative 定位textarea 负责真正的输入行号容器用一个div或者pre盖在 textarea 旁边每次 input 事件触发时重新计算行数、重新渲染行号。这是我最终采纳的方案也是最经典的做法后续所有细节都是围绕它展开的。它的优点很直接textarea 本身是所有浏览器原生支持的输入、删除、选中、复制粘贴、撤销重做这些行为全都白送不需要自己模拟兼容性完全不用操心。缺点也不是没有最大一个问题就是行号宽度不定——行号从个位数涨到两位数、三位数的时候如果不自己控制宽度界面会轻微抖动。这个在后续的样式处理里可以解决。2.2 方案二contenteditable 模拟输入区这两个方案的思路也看着挺聪明——把输入区域换成contenteditable的 div里面每行一个真正的 DOM 元素这样天然支持行号。但因为所见即所得这个特性实际坑很多中文输入法组合态、粘贴的样式污染、回车产生的标签差异、光标位置的精确控制每一个都能让人调掉半天时间。而且很多场景下还需要自己实现 undo/redo这工作量直接翻倍。对于一个小工具来说性价比太低。我当时试了不到两小时就放弃了我觉得只适合要做完整富文本编辑器的人去折腾。2.3 方案三动态列表每行一个 input这个思路也很常见——不用 textarea而是用一个容器根据行数动态渲染多个 input或 input 删除按钮的组合用户可以增删行。很多表单类的动态字段组件就是这个模式。但它有个致命缺陷它不是一个输入框而是N 个输入框所有行之间的光标联动、粘贴多行文本的分发行、行删除后的焦点转移做起来非常痛苦。如果你只是想要一个看起来像编辑器、但本质还是单块文本的东西这个方案不推荐。2.4 我为什么最终选了覆盖层方案我的判断标准其实就三条行为原生、代码量可控、样式容易统一。方案一全部满足。textarea 的交互行为我不用管我只需要处理一个行号容器的渲染和滚动同步逻辑非常收敛。所以最终决定textarea 主输入 左侧行号覆盖层用纯 Vanilla JS 实现不引任何依赖。3. 核心实现逐步拆解下面是我最终落到代码里的完整实现每一块我会拆开讲为什么这么写以及里面藏着的细节。3.1 HTML 结构与基础样式整体结构非常简单一个 flex 容器左边是行号区右边是 textareadiv classnumbered-editor div classline-numbers idlineNumbers1/div textarea idcodeInput classeditor-input spellcheckfalse placeholder粘贴或输入多行内容.../textarea /div样式上有一个非常关键的细节就是行号和输入区必须共享同一套字体、字号、行高、水平内边距。这句话看起来是废话但很多行号错位都是这里没对齐导致的。.numbered-editor { display: flex; border: 1px solid #ddd; border-radius: 6px; background: #fff; font-family: JetBrains Mono, Consolas, Courier New, monospace; font-size: 14px; line-height: 1.6; overflow: hidden; } .line-numbers { padding: 12px 8px 12px 12px; min-width: 40px; text-align: right; color: #aaa; background: #f7f8fa; user-select: none; white-space: pre; overflow: hidden; border-right: 1px solid #eee; } .editor-input { flex: 1; border: none; outline: none; resize: vertical; padding: 12px; font-family: inherit; font-size: inherit; line-height: inherit; background: transparent; color: #333; overflow: auto; white-space: pre; /* 关键禁止自动换行 */ overflow-x: auto; /* 长行横向滚动 */ }这里我要单独强调一下white-space: pre这个属性。textarea 默认是会自动换行的一旦某个长行被软换行visual wrap行号就永远对不上了因为文本行的数量和视觉行的数量不再相等。如果你允许自动换行就需要用隐藏 div 去实时测量每一行的高度复杂度上升一个量级。对自用工具来说我直接禁掉自动换行让长行走横向滚动行号永远准确。这是一个很实用的取舍。3.2 行号生成逻辑行号的生成逻辑很简单统计 textarea 里换行符的数量然后生成一段从 1 到 N 的行号文本。这里有个性能细节要处理。const textarea document.getElementById(codeInput); const lineNumbers document.getElementById(lineNumbers); let frameId null; function updateLineNumbers() { const lines textarea.value.split(\n).length; let html ; for (let i 1; i lines; i) { html i \n; } lineNumbers.textContent html; }用textContent而不是innerHTML一次性赋值可以避免每一次 append 都触发 DOM 重排。为什么循环拼接完后一次赋值因为innerHTML或者textContent的每次赋值都会引起浏览器重新布局如果一行一行地 append行数多的时候会非常卡。拼成一个字符串再一次性写入浏览器只需要重排一次。另一个小细节是split(\n).length的正确性问题a\n在 JavaScript 里 split 后的数组长度是 2也就是说最后一行其实是空字符串。这个行为恰好是我们要的——因为 textarea 里以换行结尾时界面上的确会多出一行空行。所以在没有额外统计的情况下这个简单的写法是对的。3.3 滚动同步这是整个组件最容易出问题的地方。textarea 自己内部滚动后行号容器必须同步滚动到相同的位置否则行号和内容就会错位。textarea.addEventListener(scroll, () { lineNumbers.scrollTop textarea.scrollTop; });为什么能这么直接地赋值因为两边行高相同、顶部内边距相同所以同一行内容距离顶部的像素偏移完全一致唯一的变量就是滚动距离。把lineNumbers.scrollTop等于textarea.scrollTop之后行号就跟着内容一起走了。这里有个隐藏问题行号容器自身也可能出现滚动条。因为当行数很多时行号容器内部内容的高度会超过它的可视高度。我们要想办法让它不要出现自己的滚动条只作为被同步者。我在样式里加了overflow: hidden这样它内部的内容依然可以滚动JavaScript 可以设置它的 scrollTop但不会显示滚动条也就不会出现双滚动条打架的情况。如果用 flex 布局左边的行号容器经常会跟着右边 textarea 一起被拉伸。如果没有这个overflow: hidden你会发现行号区域单独出现了滚动条这通常是大家第一次实现这个组件时最容易看到的现象。3.4 输入事件与性能优化给 textarea 绑定input事件来触发行号更新这是最直接的方案。但 input 事件在用户连续输入、粘贴大文本时触发频率非常高如果每次都同步计算行号大文件场景下会有明显的卡顿感。所以我加了一个requestAnimationFrame做节流。textarea.addEventListener(input, scheduleUpdate); function scheduleUpdate() { if (frameId) return; frameId requestAnimationFrame(() { updateLineNumbers(); frameId null; }); }这个节流的原理很简单requestAnimationFrame会在浏览器下一次重绘之前执行回调连续触发 input 事件时中间所有帧的更新都会被合并成一次。对于 5 万行的文本来说这个优化能明显降低卡顿。另外我还在组件挂载完成后立即调用一次updateLineNumbers()这样初始状态不会出现行号为空的尴尬情况。如果初始 value 是通过 JS 赋值的注意要手动触发一次更新因为直接给.value赋值不会触发 input 事件。3.5 完整代码汇总把上面的代码合到一起就是一个可用的完整组件(() { const textarea document.getElementById(codeInput); const lineNumbers document.getElementById(lineNumbers); let frameId null; function updateLineNumbers() { const lines textarea.value.split(\n).length; let str ; for (let i 1; i lines; i) { str i \n; } lineNumbers.textContent str; } function scheduleUpdate() { if (frameId) return; frameId requestAnimationFrame(() { updateLineNumbers(); frameId null; }); } textarea.addEventListener(scroll, () { lineNumbers.scrollTop textarea.scrollTop; }); textarea.addEventListener(input, scheduleUpdate); // 初始渲染 updateLineNumbers(); })();整个组件的核心代码就是这么短。很多看起来炫酷的编辑器剥开外壳之后核心逻辑其实和我们这个差不多只不过他们在细节上做得更极致而已。4. 踩坑记录与排查思路这个组件看着简单实际调试时遇到的问题一点都不少。下面几个是我真实踩过的坑按出现概率从高到低记录。4.1 行号容器出现独立滚动条这个问题出现的频率最高几乎十个照着做的人里有八个会碰到。症状很典型行数超过一屏后左边的行号区域自己冒出了滚动条右边的 textarea 也有滚动条两个滚动条互相独立滚起来完全错位。原因我在前面提到过flex 布局会让两个子容器等高行号容器内部内容超高时浏览器默认就给它加滚动条。解决方法是给.line-numbers设置overflow: hidden让容器自身不渲染滚动条同时保留 JavaScript 手动设置scrollTop的能力。另外建议给行号容器加一个不可选中的样式user-select: none这样用户拖动选中文本时不会把行号也选进去体验会好很多。4.2 行高不一致导致行号越到后面越歪如果你写完发现前几行行号是对齐的但越到后面偏移越大基本可以断定是字体或行高没对齐。最常见的原因是 textarea 有一些浏览器默认样式比如 Chrome 会给 textarea 设置独立的字体族和字体大小如果你只在外层容器上设置了字体textarea 不一定会继承。解决方案就是我在样式里反复强调的给 textarea 显式设置font-family: inherit; font-size: inherit; line-height: inherit;同时把line-height设成一个固定倍数比如 1.6然后在行号容器上也要显式设置同样的行高。两边行高一致了偏移就不会累积。4.3 输入法组合状态下行号闪跳在 Chrome 里用中文输入法打字时候选框展开期间会触发 input 事件而 textarea 的 value 在组合输入过程中可能会包含中间态内容导致行号一闪一闪地变多又变少。尤其是在行尾打中文明明只打了一个字行号却多了一行又少了一行。这个问题在小工具场景下其实不致命但如果你在意可以使用compositionstart和compositionend事件做标记在组合期间不作行号更新let isComposing false; textarea.addEventListener(compositionstart, () { isComposing true; }); textarea.addEventListener(compositionend, () { isComposing false; scheduleUpdate(); }); function scheduleUpdate() { if (isComposing) return; // ...节流更新逻辑 }这样组合输入过程中行号不会频繁跳动结束组合时再补一次更新体验会顺滑很多。4.4 粘贴大段文本后没反应有个容易忽略的场景用户通过右键菜单粘贴文本而不是 CtrlV。在某些浏览器和系统组合下右键粘贴不会触发 input 事件或者触发的时机很诡异导致行号不更新。这个坑排查起来特别隐蔽因为你自己用 CtrlV 完全正常。稳妥的做法是除了input再监听一个change事件兜底。change事件在元素失去焦点时触发虽然时机比 input 晚但至少能保证行号最终是对的。如果你的组件允许在外部对 textarea 赋值比如点击加载示例按钮也要在赋值后手动调用一次updateLineNumbers()。4.5 行号宽度不够出现挤压当文本行数从 9 行变成 10 行时行号从个位数变成两位数如果.line-numbers没有预留足够宽度内容会被压缩甚至出现水平截断。我给行号容器设了min-width: 40px但这不是一个动态方案。如果希望更完美可以在组件初始化时根据预估行数动态调整宽度或者用固定宽度width: 3em之类的单位。其实最省事的方案是设置一个足够的min-width比如 60px这样至少支持到 999 行。对自用组件来说足够用就好。5. 几个我后来加上的增强小技巧基础功能跑通之后我又陆续加了一些小优化这里一并分享出来。5.1 Tab 键插入缩进textarea 原生不处理 Tab 键按 Tab 光标会直接跳到下一个表单控件这在输入代码场景下非常让人抓狂。解决方式是阻止默认行为手动在光标位置插入两个空格。textarea.addEventListener(keydown, (e) { if (e.key Tab) { e.preventDefault(); const start textarea.selectionStart; const end textarea.selectionEnd; textarea.value textarea.value.substring(0, start) textarea.value.substring(end); textarea.selectionStart textarea.selectionEnd start 2; updateLineNumbers(); } });如果选中的是多行文本你甚至可以在每一行的开头都加上缩进这就是多行缩进功能。有兴趣可以自己扩展。5.2 行号高亮当前行有了行号后如果能高亮当前正在编辑的行定位会更容易。实现思路是在 textarea 上监听 click 和 keyup计算当前光标所在行然后动态控制一个半透明背景层。但因为 textarea 不支持在内部渲染子元素常见做法是用一个绝对定位的 div 垫在 textarea 后面把当前行背景画在那个 div 上textarea 背景设为透明。这个功能我后来做了一半觉得收益不大就没继续因为纯色背景垫底方案在滚动同步上又多了一个要同步的元素。如果你只需要看行号其实没必要上这个功能。5.3 行号区支持点击跳转我的实际使用场景中经常需要在两个很远的位置之间跳转比如上面看配置下面改数据。加一个点击行号跳转到对应行的功能非常实用。实现思路是监听行号容器的 click 事件根据点击的 y 坐标除以行高计算出目标行号然后把 textarea 的滚动位置设置到对应行lineNumbers.addEventListener(click, (e) { const lineHeight parseFloat(getComputedStyle(textarea).lineHeight); const clickedLine Math.floor(e.offsetY / lineHeight); const targetScrollTop textarea.scrollTop (clickedLine * lineHeight); textarea.scrollTop targetScrollTop; lineNumbers.scrollTop targetScrollTop; });注意这里不能直接把 textarea.scrollTop 设为clickedLine * lineHeight因为要基于当前滚动位置计算偏移否则每次点击都会跳回顶部附近。6. 总结一下这个自用组件的剩余价值这个带序号的输入框前前后后我大概用了不到一天时间做完代码量加起来也就一百多行但它解决的问题非常实际。如果你只是需要一个朴素的行号输入区花几小时自己写一个完全来得及而且你能完全掌控样式和行为后续加功能也容易。我做完之后的最大体会是很多看似简单的小组件难点从来不在实现基本的输入而在处理边界情况。比如滚动同步、输入法组合、换行策略、粘贴事件兜底这些坑不自己做一遍根本遇不到也很难只看文档理解。建议你也拿一个简单的组件行号输入、标签输入、自动补全从头手写一遍踩坑的过程比看十篇文章都有用。最后再分享一个小技巧如果你要把这套代码放到生产项目里可以把组件封装成一个构造函数或者 Web Component把 textarea 和行号容器都作为参数传入这样你就可以在同一个页面里挂载多个实例互不干扰。我当时图省事直接用 id 写死了后面想复用时才后悔没早一点封装。
1. 先说说这东西是干嘛的前阵子在搞一个内部小工具需要一个能输入多行命令序列的面板。普通 textarea 倒是能用但问题在于我看不清当前到底编辑到第几行——尤其是脚本稍微长一点30 行 50 行往后想定位某一行就全靠肉眼数数错是家常便饭。当时脑子里第一个想法就是要是有个编辑器那样的行号就好了。去翻了翻 GitHub 上的现成组件说实话能用的库不是没有但要么体积太大为了个行号引入一个编辑器全家桶要么样式跟我的页面格格不入改起来比我自己写一个还费劲。想了半天干脆自己撸一个带序号的输入框专门给自己用。这个记录就是当时从零实现这个组件时踩的坑、做的取舍、以及最终的完整代码。如果你也在琢磨类似的小组件可以直接拿走这套思路。2. 方案对比与选型动手之前我在脑子里过了一遍市面上常见的几种实现路子每种的坑都大概有数这里把对比列出来。2.1 方案一text areas 配覆盖层这个思路最容易理解一个外层容器做 relative 定位textarea 负责真正的输入行号容器用一个div或者pre盖在 textarea 旁边每次 input 事件触发时重新计算行数、重新渲染行号。这是我最终采纳的方案也是最经典的做法后续所有细节都是围绕它展开的。它的优点很直接textarea 本身是所有浏览器原生支持的输入、删除、选中、复制粘贴、撤销重做这些行为全都白送不需要自己模拟兼容性完全不用操心。缺点也不是没有最大一个问题就是行号宽度不定——行号从个位数涨到两位数、三位数的时候如果不自己控制宽度界面会轻微抖动。这个在后续的样式处理里可以解决。2.2 方案二contenteditable 模拟输入区这两个方案的思路也看着挺聪明——把输入区域换成contenteditable的 div里面每行一个真正的 DOM 元素这样天然支持行号。但因为所见即所得这个特性实际坑很多中文输入法组合态、粘贴的样式污染、回车产生的标签差异、光标位置的精确控制每一个都能让人调掉半天时间。而且很多场景下还需要自己实现 undo/redo这工作量直接翻倍。对于一个小工具来说性价比太低。我当时试了不到两小时就放弃了我觉得只适合要做完整富文本编辑器的人去折腾。2.3 方案三动态列表每行一个 input这个思路也很常见——不用 textarea而是用一个容器根据行数动态渲染多个 input或 input 删除按钮的组合用户可以增删行。很多表单类的动态字段组件就是这个模式。但它有个致命缺陷它不是一个输入框而是N 个输入框所有行之间的光标联动、粘贴多行文本的分发行、行删除后的焦点转移做起来非常痛苦。如果你只是想要一个看起来像编辑器、但本质还是单块文本的东西这个方案不推荐。2.4 我为什么最终选了覆盖层方案我的判断标准其实就三条行为原生、代码量可控、样式容易统一。方案一全部满足。textarea 的交互行为我不用管我只需要处理一个行号容器的渲染和滚动同步逻辑非常收敛。所以最终决定textarea 主输入 左侧行号覆盖层用纯 Vanilla JS 实现不引任何依赖。3. 核心实现逐步拆解下面是我最终落到代码里的完整实现每一块我会拆开讲为什么这么写以及里面藏着的细节。3.1 HTML 结构与基础样式整体结构非常简单一个 flex 容器左边是行号区右边是 textareadiv classnumbered-editor div classline-numbers idlineNumbers1/div textarea idcodeInput classeditor-input spellcheckfalse placeholder粘贴或输入多行内容.../textarea /div样式上有一个非常关键的细节就是行号和输入区必须共享同一套字体、字号、行高、水平内边距。这句话看起来是废话但很多行号错位都是这里没对齐导致的。.numbered-editor { display: flex; border: 1px solid #ddd; border-radius: 6px; background: #fff; font-family: JetBrains Mono, Consolas, Courier New, monospace; font-size: 14px; line-height: 1.6; overflow: hidden; } .line-numbers { padding: 12px 8px 12px 12px; min-width: 40px; text-align: right; color: #aaa; background: #f7f8fa; user-select: none; white-space: pre; overflow: hidden; border-right: 1px solid #eee; } .editor-input { flex: 1; border: none; outline: none; resize: vertical; padding: 12px; font-family: inherit; font-size: inherit; line-height: inherit; background: transparent; color: #333; overflow: auto; white-space: pre; /* 关键禁止自动换行 */ overflow-x: auto; /* 长行横向滚动 */ }这里我要单独强调一下white-space: pre这个属性。textarea 默认是会自动换行的一旦某个长行被软换行visual wrap行号就永远对不上了因为文本行的数量和视觉行的数量不再相等。如果你允许自动换行就需要用隐藏 div 去实时测量每一行的高度复杂度上升一个量级。对自用工具来说我直接禁掉自动换行让长行走横向滚动行号永远准确。这是一个很实用的取舍。3.2 行号生成逻辑行号的生成逻辑很简单统计 textarea 里换行符的数量然后生成一段从 1 到 N 的行号文本。这里有个性能细节要处理。const textarea document.getElementById(codeInput); const lineNumbers document.getElementById(lineNumbers); let frameId null; function updateLineNumbers() { const lines textarea.value.split(\n).length; let html ; for (let i 1; i lines; i) { html i \n; } lineNumbers.textContent html; }用textContent而不是innerHTML一次性赋值可以避免每一次 append 都触发 DOM 重排。为什么循环拼接完后一次赋值因为innerHTML或者textContent的每次赋值都会引起浏览器重新布局如果一行一行地 append行数多的时候会非常卡。拼成一个字符串再一次性写入浏览器只需要重排一次。另一个小细节是split(\n).length的正确性问题a\n在 JavaScript 里 split 后的数组长度是 2也就是说最后一行其实是空字符串。这个行为恰好是我们要的——因为 textarea 里以换行结尾时界面上的确会多出一行空行。所以在没有额外统计的情况下这个简单的写法是对的。3.3 滚动同步这是整个组件最容易出问题的地方。textarea 自己内部滚动后行号容器必须同步滚动到相同的位置否则行号和内容就会错位。textarea.addEventListener(scroll, () { lineNumbers.scrollTop textarea.scrollTop; });为什么能这么直接地赋值因为两边行高相同、顶部内边距相同所以同一行内容距离顶部的像素偏移完全一致唯一的变量就是滚动距离。把lineNumbers.scrollTop等于textarea.scrollTop之后行号就跟着内容一起走了。这里有个隐藏问题行号容器自身也可能出现滚动条。因为当行数很多时行号容器内部内容的高度会超过它的可视高度。我们要想办法让它不要出现自己的滚动条只作为被同步者。我在样式里加了overflow: hidden这样它内部的内容依然可以滚动JavaScript 可以设置它的 scrollTop但不会显示滚动条也就不会出现双滚动条打架的情况。如果用 flex 布局左边的行号容器经常会跟着右边 textarea 一起被拉伸。如果没有这个overflow: hidden你会发现行号区域单独出现了滚动条这通常是大家第一次实现这个组件时最容易看到的现象。3.4 输入事件与性能优化给 textarea 绑定input事件来触发行号更新这是最直接的方案。但 input 事件在用户连续输入、粘贴大文本时触发频率非常高如果每次都同步计算行号大文件场景下会有明显的卡顿感。所以我加了一个requestAnimationFrame做节流。textarea.addEventListener(input, scheduleUpdate); function scheduleUpdate() { if (frameId) return; frameId requestAnimationFrame(() { updateLineNumbers(); frameId null; }); }这个节流的原理很简单requestAnimationFrame会在浏览器下一次重绘之前执行回调连续触发 input 事件时中间所有帧的更新都会被合并成一次。对于 5 万行的文本来说这个优化能明显降低卡顿。另外我还在组件挂载完成后立即调用一次updateLineNumbers()这样初始状态不会出现行号为空的尴尬情况。如果初始 value 是通过 JS 赋值的注意要手动触发一次更新因为直接给.value赋值不会触发 input 事件。3.5 完整代码汇总把上面的代码合到一起就是一个可用的完整组件(() { const textarea document.getElementById(codeInput); const lineNumbers document.getElementById(lineNumbers); let frameId null; function updateLineNumbers() { const lines textarea.value.split(\n).length; let str ; for (let i 1; i lines; i) { str i \n; } lineNumbers.textContent str; } function scheduleUpdate() { if (frameId) return; frameId requestAnimationFrame(() { updateLineNumbers(); frameId null; }); } textarea.addEventListener(scroll, () { lineNumbers.scrollTop textarea.scrollTop; }); textarea.addEventListener(input, scheduleUpdate); // 初始渲染 updateLineNumbers(); })();整个组件的核心代码就是这么短。很多看起来炫酷的编辑器剥开外壳之后核心逻辑其实和我们这个差不多只不过他们在细节上做得更极致而已。4. 踩坑记录与排查思路这个组件看着简单实际调试时遇到的问题一点都不少。下面几个是我真实踩过的坑按出现概率从高到低记录。4.1 行号容器出现独立滚动条这个问题出现的频率最高几乎十个照着做的人里有八个会碰到。症状很典型行数超过一屏后左边的行号区域自己冒出了滚动条右边的 textarea 也有滚动条两个滚动条互相独立滚起来完全错位。原因我在前面提到过flex 布局会让两个子容器等高行号容器内部内容超高时浏览器默认就给它加滚动条。解决方法是给.line-numbers设置overflow: hidden让容器自身不渲染滚动条同时保留 JavaScript 手动设置scrollTop的能力。另外建议给行号容器加一个不可选中的样式user-select: none这样用户拖动选中文本时不会把行号也选进去体验会好很多。4.2 行高不一致导致行号越到后面越歪如果你写完发现前几行行号是对齐的但越到后面偏移越大基本可以断定是字体或行高没对齐。最常见的原因是 textarea 有一些浏览器默认样式比如 Chrome 会给 textarea 设置独立的字体族和字体大小如果你只在外层容器上设置了字体textarea 不一定会继承。解决方案就是我在样式里反复强调的给 textarea 显式设置font-family: inherit; font-size: inherit; line-height: inherit;同时把line-height设成一个固定倍数比如 1.6然后在行号容器上也要显式设置同样的行高。两边行高一致了偏移就不会累积。4.3 输入法组合状态下行号闪跳在 Chrome 里用中文输入法打字时候选框展开期间会触发 input 事件而 textarea 的 value 在组合输入过程中可能会包含中间态内容导致行号一闪一闪地变多又变少。尤其是在行尾打中文明明只打了一个字行号却多了一行又少了一行。这个问题在小工具场景下其实不致命但如果你在意可以使用compositionstart和compositionend事件做标记在组合期间不作行号更新let isComposing false; textarea.addEventListener(compositionstart, () { isComposing true; }); textarea.addEventListener(compositionend, () { isComposing false; scheduleUpdate(); }); function scheduleUpdate() { if (isComposing) return; // ...节流更新逻辑 }这样组合输入过程中行号不会频繁跳动结束组合时再补一次更新体验会顺滑很多。4.4 粘贴大段文本后没反应有个容易忽略的场景用户通过右键菜单粘贴文本而不是 CtrlV。在某些浏览器和系统组合下右键粘贴不会触发 input 事件或者触发的时机很诡异导致行号不更新。这个坑排查起来特别隐蔽因为你自己用 CtrlV 完全正常。稳妥的做法是除了input再监听一个change事件兜底。change事件在元素失去焦点时触发虽然时机比 input 晚但至少能保证行号最终是对的。如果你的组件允许在外部对 textarea 赋值比如点击加载示例按钮也要在赋值后手动调用一次updateLineNumbers()。4.5 行号宽度不够出现挤压当文本行数从 9 行变成 10 行时行号从个位数变成两位数如果.line-numbers没有预留足够宽度内容会被压缩甚至出现水平截断。我给行号容器设了min-width: 40px但这不是一个动态方案。如果希望更完美可以在组件初始化时根据预估行数动态调整宽度或者用固定宽度width: 3em之类的单位。其实最省事的方案是设置一个足够的min-width比如 60px这样至少支持到 999 行。对自用组件来说足够用就好。5. 几个我后来加上的增强小技巧基础功能跑通之后我又陆续加了一些小优化这里一并分享出来。5.1 Tab 键插入缩进textarea 原生不处理 Tab 键按 Tab 光标会直接跳到下一个表单控件这在输入代码场景下非常让人抓狂。解决方式是阻止默认行为手动在光标位置插入两个空格。textarea.addEventListener(keydown, (e) { if (e.key Tab) { e.preventDefault(); const start textarea.selectionStart; const end textarea.selectionEnd; textarea.value textarea.value.substring(0, start) textarea.value.substring(end); textarea.selectionStart textarea.selectionEnd start 2; updateLineNumbers(); } });如果选中的是多行文本你甚至可以在每一行的开头都加上缩进这就是多行缩进功能。有兴趣可以自己扩展。5.2 行号高亮当前行有了行号后如果能高亮当前正在编辑的行定位会更容易。实现思路是在 textarea 上监听 click 和 keyup计算当前光标所在行然后动态控制一个半透明背景层。但因为 textarea 不支持在内部渲染子元素常见做法是用一个绝对定位的 div 垫在 textarea 后面把当前行背景画在那个 div 上textarea 背景设为透明。这个功能我后来做了一半觉得收益不大就没继续因为纯色背景垫底方案在滚动同步上又多了一个要同步的元素。如果你只需要看行号其实没必要上这个功能。5.3 行号区支持点击跳转我的实际使用场景中经常需要在两个很远的位置之间跳转比如上面看配置下面改数据。加一个点击行号跳转到对应行的功能非常实用。实现思路是监听行号容器的 click 事件根据点击的 y 坐标除以行高计算出目标行号然后把 textarea 的滚动位置设置到对应行lineNumbers.addEventListener(click, (e) { const lineHeight parseFloat(getComputedStyle(textarea).lineHeight); const clickedLine Math.floor(e.offsetY / lineHeight); const targetScrollTop textarea.scrollTop (clickedLine * lineHeight); textarea.scrollTop targetScrollTop; lineNumbers.scrollTop targetScrollTop; });注意这里不能直接把 textarea.scrollTop 设为clickedLine * lineHeight因为要基于当前滚动位置计算偏移否则每次点击都会跳回顶部附近。6. 总结一下这个自用组件的剩余价值这个带序号的输入框前前后后我大概用了不到一天时间做完代码量加起来也就一百多行但它解决的问题非常实际。如果你只是需要一个朴素的行号输入区花几小时自己写一个完全来得及而且你能完全掌控样式和行为后续加功能也容易。我做完之后的最大体会是很多看似简单的小组件难点从来不在实现基本的输入而在处理边界情况。比如滚动同步、输入法组合、换行策略、粘贴事件兜底这些坑不自己做一遍根本遇不到也很难只看文档理解。建议你也拿一个简单的组件行号输入、标签输入、自动补全从头手写一遍踩坑的过程比看十篇文章都有用。最后再分享一个小技巧如果你要把这套代码放到生产项目里可以把组件封装成一个构造函数或者 Web Component把 textarea 和行号容器都作为参数传入这样你就可以在同一个页面里挂载多个实例互不干扰。我当时图省事直接用 id 写死了后面想复用时才后悔没早一点封装。
` 以及如何自动改写为 `for-of` 循环)
