如何使用JavaScript在HTML文本框旁边添加自动行号？

Question

我看过一些网站，比如Github Gist和copy.sh，它们都有带有行号的文本框。

似乎左边有一个包含行号元素的部分，每次创建新行时，左侧会添加一个具有新行号的元素；当删除一行时，最后一行的行号会被删除。

我查看了javascript代码，但是无法理解它。我该如何实现这样的部分（带有行号的文本框）？

谢谢。

P.S 我希望避免使用Jquery。

- thepiercingarrow

Answer 1

我为您做了一个快速的示例...

var divCopy = document.getElementById('copyText'),
nmbrBox = document.getElementById('numbers'),
txtBox = document.getElementById('textBox'),
lineHeight = 20;

//Bind events to elements
function addEvents() {
  "use strict";
  txtBox.addEventListener("keyup", copyText, false);
  txtBox.addEventListener("keyup", addLines, false);
}

/*
  This function copies the text from the textarea to a div 
  so we can check the height and then get the number of lines 
  from that information
*/
function copyText() {
  "use strict";

  //variable to hold and manipulate the value of our textarea
  var txtBoxVal = txtBox.value;

  //regular expression to replace new lines with line breaks
  txtBoxVal = txtBoxVal.replace(/(?:\r\n|\r|\n)/g, '<br />');

  //copies the text from the textarea to the #copyText div
  divCopy.innerHTML = txtBoxVal;
}

function addLines() {
  "use strict";
  var lines = divCopy.offsetHeight / lineHeight, x = 1, holder = '';
  for (x = 1; x <= lines; x = x + 1) {
    holder += '<div class="row">' + x + '.</div>';
  }
  if (lines === 0) {
    holder = '<div class="row">1.</div>';
  }
  nmbrBox.innerHTML = holder;
}

window.addEventListener("load", addEvents, false);

html, body{
  font-size: 10px;
  height: 100%;
}

textarea{
  background: #f3f3f3;
  color: #111;
  font-family: sans-serif;
  font-size: 1.8em;
  line-height: 20px;
  min-height: 600px;
  min-width: 800px;
  resize: none;
  overflow: hidden;
  position: absolute;
  left: 56px;
}

textarea:focus{
  outline: 0;
}

textarea, .rows{
  display: inline-block;
}

.rows{
  background: #e3e3e3;
  box-sizing: border-box;
  color: #999;
  font-family: monospace;
  font-size: 1.8em;
  height: 100%;
  line-height: 20px;
  max-height: 600px;
  overflow: hidden;
  padding: 0.16em 0em;
  text-align: right;
  width: 48px;
  vertical-align: top;
}
    
#copyText{
  display:inline-block;
  font-family: sans-serif;
  font-size: 1.8em;
  line-height: 20px;
  visibility: hidden;
}

<div class="container">
  <div class="rows" id="numbers">
    <div class="row">1.</div>
  </div>
  <textarea rows="30" id="textBox"></textarea>
  <div id="copyText"></div>
</div>
<script src="script.js" type="text/javascript"></script>

请确保将所有这些文件放在同一个目录中，并按照我列出的文件名保存。这个例子仅有大约30行，但你可以根据自己的需要进行修改。同时，请不要插入HTML标签，因为这会导致它出现问题。你可以再次修改以适应你的需求，这只是一个快速的示例。

基本上，你正在将文本从文本区域复制到一个div中，然后根据div的高度计算文本区域中的行数。

希望这可以帮助你！

- solid90

Answer 2

根据您想要做得有多好而定。

一个快速且简单的方法是在每次执行 return 时添加计数器。

开始操作：

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

如果你开始删除行，这种方法就不起作用了。你可以潜在地捕捉每个事件并检查它是否正在删除return语句，并在其执行时减少计数。

你还可以对文本区域中的所有换行符进行计数：

//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;
}

如果您想要做一个全功能的行计数器，即使在文本自动换行的情况下仍然可以正确计算行数，您需要做一些聪明的事情。在大多数情况下，这里和链接中展示的代码组合将为您提供大部分功能的行计数器。如何组合这些代码取决于您。

- Seph Reed