如何使用javascript在html文本框旁边自动生成行号？

我见过像和这样的网站，它们的文本框左边有行号

左侧似乎有一个部分包含带有行号的元素，每次创建新行时，都会在左侧添加带有新行号的元素，删除行时，会删除最后一个行号

我看了javascript，但是我不能理解它。我将如何实现这样一个部分（带有行号的文本框）

谢谢

---

另外，我更愿意避免使用Jquery。

这取决于您希望它做得多好

一个快速而肮脏的方法是在每次返回被点击时添加一个计数器

要开始，请执行以下操作：

document.getElementById("myTextArea").on("keypress", function(event) {
    var key = event.key;
    if(key == 13) {
         addLineCount();
    }
});

但是，如果您开始删除行，这将不起作用。当它发生时，您可以潜在地减少计数

您可以做的另一件事是计算textarea中的所有返回字符：

//the dollar sign is just what I use to know it's a DOM element
var $textToCount = document.getElementById("myTextArea");
$textToCount.on("keypress", function(event) {
    //get the number of newlines
    var lines = $textToCount.innerHtml.match("\n").length;
    setLineCount(lines);      
});

这将起作用，但效率较低。此外，如果使用文本换行，行号将不会将换行的行仅表示为一行，则会出现一些错误

如果不知道如何添加“行计数”列，请尝试以下操作：

function setLineCount(count) {
    var out = "";
    for(var c < count) {
        out += count+"<br>";
    }
    document.getElementById("lineCountColumn").innerHTML = out;
}

函数setLineCount（计数）{
var out=“”；
对于（var c<计数）{
out+=计数+“
”；
}
document.getElementById（“lineCountColumn”）.innerHTML=out；
}

---

如果你想做一个全功能的行计数器，在这个计数器中，文本包装仍然可以正确地对行进行编号，那么你必须做一些聪明的事情。在大多数情况下，此处显示的代码和链接中显示的代码的一些组合将为您提供一个功能最强大的行计数器。这取决于你如何把各个部分组合起来。

我在这里给你举了一个简单的例子

var divCopy=document.getElementById（'copyText'），
nmbrBox=document.getElementById（'numbers'），
txtBox=document.getElementById（'textBox'），
线宽=20；
//将事件绑定到元素
函数addEvents（）{
“严格使用”；
txtBox.addEventListener（“keyup”，copyText，false）；
txtBox.addEventListener（“keyup”，addLines，false）；
}
/*
此函数用于将文本从textarea复制到div
所以我们可以检查高度，然后得到行数
根据这些信息
*/
函数copyText（）{
“严格使用”；
//变量来保存和操作textarea的值
var txtBoxVal=txtBox.value；
//用换行符替换新行的正则表达式
txtBoxVal=txtBoxVal.replace（/（？：\r\n |\r |\n）/g，“
”）；
//将文本从文本区域复制到#copyText div
divCopy.innerHTML=txtBoxVal；
}
函数addLines（）{
“严格使用”；
var lines=divCopy.offsetHeight/lineHeight，x=1，holder=''；
对于（x=1；x