Anzeige der aktuellen Zeilen- und Spaltennummer für ein Textfeld

Question

Ich mache eine Datei-Bearbeitungsschnittstelle in meiner Web-App, ich habe ein Textfeld mit Dateiinhalten.

Wenn Textfeld konzentriert ist, möchte ich die Position des Cursors ausgeben, d. H. Zeilennummer und Spalte: Dies ist nützlich, weil Fehlermeldungen normalerweise zum Beispiel eine Zeilennummer ergeben.

Die Frage ist: Wie finde ich die Position des Cursors in Textarea? Ich benutze eine Prototyp-Bibliothek. Vielleicht gibt es schon eine Lösung?

Ich interessiere mich nicht wirklich für ausgefallene Symbolleisten für das Textfeld, die von diesen fortschrittlichen Widgets angeboten werden.

Answer 1

Möglicherweise möchten Sie diese 2 Links überprüfen:

http://www.dedestruct.com/2008/03/22/howto-cross-browser-cursor-position-in-textareas/^{[Die ursprünglichen Quelle existiert nicht mehr, die modifizierten Link verweist auf die neueste Version des Web-Archiv]}

https://developer.mozilla.org/En/DOM:Selection

... Sobald Sie eine Auswahl (Cursor-Index im Text) haben, können Sie Ihren Text durch Zeilenumbrüche teilen und so die Zeilennummer erhalten. Sie Spalte durch die Bestimmung Index von Anfang einer Zeile

Answer 2

Wenn ich möchte die aktuelle Zeilennummer der Textbereich und aktuelle Spalte von Textfeld bekommen, ich so gelöst:

<textarea onkeyup="getLineNumberAndColumnIndex(this);" onmouseup="this.onkeyup();" > 
</textarea> 

function getLineNumberAndColumnIndex(textarea){ 
    var textLines = textarea.value.substr(0, textarea.selectionStart).split("\n"); 
    var currentLineNumber = textLines.length; 
    var currentColumnIndex = textLines[textLines.length-1].length; 
    console.log("Current Line Number "+ currentLineNumber+" Current Column Index "+currentColumnIndex); 
    }