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

textarea加行号（一）

<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: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来说，没有，都一样。

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

樵歌 发表于 2023-1-4 20:30

帮占{:4_173:}

千羽 发表于 2023-1-4 20:33

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

俺也来帮占个位{:4_173:}

红影 发表于 2023-1-4 21:03

回车试了一下，行号自动出来了{:4_187:}

马黑黑 发表于 2023-1-4 21:09

红影 发表于 2023-1-4 21:03
回车试了一下，行号自动出来了

回车的测试是最简单的测试，不会有问题

马黑黑 发表于 2023-1-4 21:10

樵歌 发表于 2023-1-4 20:30
帮占

谢谢

马黑黑 发表于 2023-1-4 21:10

千羽 发表于 2023-1-4 20:33
俺也来帮占个位

感谢

红影 发表于 2023-1-4 22:42

马黑黑 发表于 2023-1-4 21:09
回车的测试是最简单的测试，不会有问题

真不错，立竿见影{:4_187:}

马黑黑 发表于 2023-1-4 22:53

红影 发表于 2023-1-4 22:42
真不错，立竿见影

这个行号文本框适用于短行文本，比如用来显示和编辑用户IP号、联系号码什么的

樵歌 发表于 2023-1-5 12:15

马黑黑 发表于 2023-1-4 21:10
谢谢

不谢，还要占吗{:4_173:}

马黑黑 发表于 2023-1-5 12:16

樵歌 发表于 2023-1-5 12:15
不谢，还要占吗

不用了

红影 发表于 2023-1-5 19:03

马黑黑 发表于 2023-1-4 22:53
这个行号文本框适用于短行文本，比如用来显示和编辑用户IP号、联系号码什么的

嗯，特别方便，省得手动去加了。

马黑黑 发表于 2023-1-5 19:08

红影 发表于 2023-1-5 19:03
嗯，特别方便，省得手动去加了。

折行的加行号就没那么简单了。N年前，我做面试官时，曾出过一个题目，就是php处理文本的问题，当时有个附加题可选，就是与前端的文本行渲染有关，选这题可以不做主题，弄得好的在满分基础上再加20分。这题没人敢选做主题来做，但有几个作为附加题做了，可惜没有做得好的。

樵歌 发表于 2023-1-5 19:23

马黑黑 发表于 2023-1-5 12:16
不用了

好，下次早点说，俺起个大枣去排队{:4_173:}

红影 发表于 2023-1-5 19:56

马黑黑 发表于 2023-1-5 19:08
折行的加行号就没那么简单了。N年前，我做面试官时，曾出过一个题目，就是php处理文本的问题，当时有个附 ...

看起来这个还是挺难的，没几个人会。

马黑黑 发表于 2023-1-5 20:09

红影 发表于 2023-1-5 19:56
看起来这个还是挺难的，没几个人会。

思路可能简单，实现起来要处理的问题一大堆

马黑黑 发表于 2023-1-5 20:11

樵歌 发表于 2023-1-5 19:23
好，下次早点说，俺起个大枣去排队

你以为买苹果呀
页: [1] 2
查看完整版本: textarea加行号（一）