Wyświetl bieżącą linię i numer kolumny dla textarea

Question

Robię interfejs edycji plików w mojej aplikacji internetowej, mam pole tekstowe z zawartością pliku.

Po ustawieniu ostrości tekstu, chcę wyprowadzić pozycję kursora, tj. Numer wiersza i kolumnę: jest to przydatne, ponieważ komunikaty o błędach zwykle dają na przykład numer wiersza.

Pytanie brzmi: jak określić położenie kursora w polu tekstowym? Używam biblioteki prototypów. Może już istnieje rozwiązanie?

Nie jestem tak naprawdę zainteresowany fantazyjnymi paskami narzędzi dla textarea, które są oferowane przez te zaawansowane widgety.

Answer 1

Możesz sprawdzić te 2 linki:

http://www.dedestruct.com/2008/03/22/howto-cross-browser-cursor-position-in-textareas/^{[orginal źródło nie istnieje bardziej zmodyfikowane punkty Link do najnowszej wersji Archiwum Web]}

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

.. Po wybraniu (indeks kursora w tekście) można podzielić tekst na nowe linie, a tym samym uzyskać numer wiersza. można uzyskać poprzez określenie kolumny indeksu od początku linii

Answer 2

Gdy chcę aktualny numer wiersza tekstowego i bieżącej kolumnie textarea, I rozwiązać tak:

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