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

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

本文关键字：自动生成 文本 何使用 javascript html      更新时间：2023-12-11

我见过Github Gist和copy.sh等网站，它们的文本框左侧有行号。

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

我看了javascript，但我不明白。我该如何实现这样一个部分（带行号的文本框）？

谢谢。

附言：我宁愿避开Jquery。

我在这里给你举了一个快速的例子。。。

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的高度计算文本区域中的行数

希望这能有所帮助！

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

开始的一个快速而肮脏的方法是在每次命中return时添加一个计数器。

开始：

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

但是，如果您开始删除行，这将不起作用。您可以捕获每个事件，并检查它是否正在删除返回语句，并在删除时减少计数。

你可以做的另一件事是统计文本区域中的所有返回字符：

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

如果你想做一个全功能的行计数器，其中文本换行仍然正确地对行进行编号，你必须做一些聪明的事情。在大多数情况下，这里和链接中显示的代码的某些组合将为您提供一个主要功能性的行计数器。这取决于你把这些碎片拼凑起来。

相关文章：