如何在带有 javascript 的 html 文本框旁边制作自动行号？

Question

我看到 Github Gist and copy.sh 等网站的左侧有带行号的文本框。

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

我看了javascript，但是我看不懂。我将如何实现这样的部分（带有行号的文本框）？

谢谢。

P.S 我宁愿避免 Jquery.

Answer 1

取决于您希望完成的程度。

一种快速而肮脏的入门方法是在每次 return 被击中时添加一个计数器。

开始：

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

如果您开始删除行，这将不起作用。您可能 catch each event and check if it's deleting a return statement 并在它出现时减少计数。

您可以做的另一件事是计算文本区域中的所有 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);      
});

这会起作用，但效率较低。此外，如果您使用 text-wrap，它会出现一些错误，其中行号不会将换行表示为一个。

如果您不知道如何添加行数列，试试这个：

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

如果您想做一个全功能的行计数器，其中文本换行仍然正确地对行进行编号，您将不得不做一些聪明的事情。在大多数情况下，此处和 link 中显示的代码的某种组合将为您提供一个功能强大的行计数器。由你来拼凑。

Answer 2

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

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 标签也会搞砸它。您可以再次修改它以满足您的需要这只是一个简单的例子。

基本上你所做的是将文本从textarea复制到div，然后根据div的高度计算textarea中的行数。

希望对您有所帮助！

如何在带有 javascript 的 html 文本框旁边制作自动行号？

How to make automatic line numbers next to an html text box with javascript?

html

javascript

textbox

line-numbers