textarea加行号（一）

马黑黑 · 发表于 2023-1-4 18:17

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2023-1-4 18:18

代码：

<style>
#papa {
margin: auto;
width: 740px;
height: 540px;
border: 1px solid #ccc;
box-sizing: border-box;
position: relative;
}
#papa > textarea {
position: absolute;
padding: 10px;
border: none;
outline: none;
resize: none;
box-sizing: border-box;
font: normal 16px/20px sans-serif;
}
#maintxtbox {
width: calc(100% - 50px);
height: 100%;
left: 50px;
background: #fff;
white-space: nowrap;
}
#linetxtbox {
width: 50px;
height: 100%;
text-align: right;
background: #eee;
overflow: hidden;
}
</style>
<div id="papa">
<textarea id="linetxtbox" disabled>1</textarea>
<textarea id="maintxtbox"></textarea>
</div>
<script>
let showLineIdx = (ele,e) => {
let v = ele.value, lines = v.split('\n');
let numAr = [...Array(lines.length).keys()].map((item,key) => key+1);
linetxtbox.value = numAr.join('\n');
linetxtbox.scrollTop = maintxtbox.scrollTop;
}
maintxtbox.oninput = (e) => {
showLineIdx(maintxtbox,e);
}
maintxtbox.onscroll = () => linetxtbox.scrollTop = maintxtbox.scrollTop;
</script>

复制代码

马黑黑 · 发表于 2023-1-4 18:35

说明：

一、思路

两个 textarea 控件并排，左边的宽度很小，显示行号；右边的是正常宽度，主编辑区。行号文本框禁用编辑功能、没有滚动条，由程序生成行号实时填充；编辑区文本滚动条设为自动，禁用自动折行。

禁用自动折行后，两个文本框的“行”是一样的，在编辑区文本框的 input 事件中计算有多少行就可以了。

二、实现的关键细节

（一）CSS 设置了编辑区文本框为不自动折行（代码 24 行）。两个文本框的 font 等设置要一致，但二者又有差异，设置的代码并不难懂，这里不多解释。

（二）JS 中，showLineIdx() 函数设计的较为精巧：

① 42 行，获得文本框的文本，并将文本拆分为行（变量 lines 是数组变量）；
② 43 行，从行总数中将序号值赋值给数组变量 numAr；
③ 44 行，将数组变量 numAr 拼接为加了换行符的序号文本串，赋值给行号文本框；
④ 行号文本框高度与编辑文本框同步。

还有 50 行，编辑框滚动时间，令行号文本框与之保持同步。

马黑黑 · 发表于 2023-1-4 18:36

本帖最后由马黑黑于 2023-1-4 23:04 编辑

对于文本行不长的，这个适用，长行文本的，编辑和翻页会出现困难，所以，本帖标题加个（一），是textarea加行号的一个实现方式之一。下一个当然是（二），文本自动折行下的行号。自动折行所涉及的问题比较多，处理起来相对麻烦。
关于行，以前帖子提到过，行其实就是段落，短行就是一段，长行，在编辑器上的表现之一是自动折成N多个自然行。当然，换行符合分段符是有区别的，但对纯text来说，没有，都一样。

折行下的文本行号会很快写出来，预计代码量也不会很多。