Wie automatische Zeilennummern neben einem HTML-Textfeld mit Javascript?

Question

Ich habe Websites wie Github Gist und copy.sh gesehen, die Textfelder mit Zeilennummern auf der linken Seite haben.

Es scheint, dass es links einen Bereich mit Elementen mit Zeilennummern gibt, und jedes Mal, wenn Sie eine neue Zeile erstellen, wird ein Element auf der linken Seite mit einer neuen Zeilennummer hinzugefügt, und wenn Sie eine Zeile löschen Die letzte Zeilennummer wird gelöscht.

Ich schaute auf das Javascript, aber ich kann es nicht verstehen. Wie würde ich einen solchen Abschnitt (Textfeld mit Zeilennummern) implementieren?

Danke.

P.S Ich würde es vorziehen, Jquery zu vermeiden.

Answer 1

Je nachdem, wie gut Sie dies getan haben möchten.

Ein schneller und schmutziger Weg, um zu beginnen, wäre, einen Zähler jedes Mal hinzuzufügen, wenn Rückkehr getroffen wird.

Um loszulegen: obwohl

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

Diese Linien starten, wenn Sie nicht arbeiten zu löschen. Sie können möglicherweise catch each event and check if it's deleting a return statement und verringern Sie die Anzahl, wenn dies der Fall ist.

Eine andere Sache, die Sie tun können, ist es, alle Rückkehr Zeichen in das Textfeld zählen:

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

Dies funktioniert, ist aber weniger effizient. Außerdem wird es einige Fehler geben, wenn Sie Textumbruch verwenden, bei dem eine Zeilennummer keine umbrochene Zeile als nur eine darstellt.

Wenn Sie nicht wissen, wie die Zeilenzahl Spalte hinzuzufügen, versuchen Sie dies:

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

Und wenn Sie möchten, eine alle Funktionszeilenzähler in dem Textumbruch noch Zahlen die Linien richtig zu tun, Sie‘ Ich werde etwas Cleveres machen müssen. In den meisten Fällen erhalten Sie durch eine Kombination des hier und im Link angezeigten Codes einen größtenteils funktionsfähigen Zeilenzähler. Es liegt an dir, die Teile zusammenzufügen.

Answer 2

ich Ihnen ein schnelles Beispiel hier ...

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>

als die Dateinamen Stellen Sie sicher, dass diese alle im gleichen Verzeichnis abgelegt und speichern ich aufgeführt. Dieses Beispiel umfasst nur ungefähr 30 Zeilen, aber Sie können es selbst ändern, um es zu tun, wie Sie es wünschen. Auch das Eingeben von HTML-Tags wird es vermasseln. Sie könnten dies wieder an Ihre Bedürfnisse anpassen, dies war nur ein kurzes Beispiel.

Im Grunde kopieren Sie den Text aus dem Textfeld in ein div und berechnen dann die Anzahl der Zeilen in der Textfläche basierend auf der Höhe des div.

Hoffe, das hilft!