Github Gistとcopy.shのように、左側に行番号のあるテキストボックスが表示されています。javascriptを使ってhtmlテキストボックスの隣に自動行番号を付ける方法は？
左側には行番号の要素が含まれているようですが、新しい行を作成するたびに左側に新しい行番号で要素が追加され、行を削除すると最後の行番号が削除されます。
私はjavascriptを見ましたが、私はそれを理解できません。このようなセクション（行番号付きのテキストボックス）はどのように実装しますか？
ありがとうございました。
P.S私はJqueryを避けることをお勧めします。
これはどれくらいうまくいっているかによって異なります。
リピートになるたびにカウンターを追加するのが速くて汚い方法です。始めるため
：
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になり、カウントが減少する可能性があります。これは動作します
//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);
});
が、あまり効率的である：あなたが行うことができます
もう一つは、テキストエリア内のすべてのリターン文字を数えています。また、行番号が折り返し行を1つしか表さないtext-wrapを使用すると、いくつかのエラーが発生します。
あなたがラインカウント列を追加する方法がわからない場合は、この試してください：あなたの
function setLineCount(count) {
var out = "";
for(var c < count) {
out += count+"<br>";
}
document.getElementById("lineCountColumn").innerHTML = out;
}
をそして、あなたはテキストの折り返しがまだ数字を正しく行すべての機能ラインカウンタを行いたい場合は、」賢明な何かをしなければならなくなるだろう。ほとんどの場合、ここに表示されているリンクとリンクに表示されているコードを組み合わせると、ほとんど機能的なラインカウンタが得られます。一緒に置くのはあなた次第です。
私はあなたにここに簡単な例を作った...
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>基本的には、テキストエリアのテキストをdivにコピーしてから、divの高さに基づいてテキストエリアの行数を計算することです。
希望すると便利です。