Показать текущую строку и номер столбца для текстовой области

Question

Я делаю интерфейс редактирования файлов в своем веб-приложении, у меня есть текстовая область с содержимым файлов.

Когда текстовое поле сфокусировано, я хочу вывести позицию курсора, то есть номер строки и столбец: это полезно, потому что сообщения об ошибках обычно дают номер строки, например.

Вопрос заключается в следующем: как определить положение курсора в текстовой области? Я использую библиотеку прототипов. Может быть, решение уже есть?

Меня не очень интересуют модные панели инструментов для текстовой области, которые предлагаются этими продвинутыми виджетами.

Answer 1

Вы можете проверить эти 2 ссылки:

http://www.dedestruct.com/2008/03/22/howto-cross-browser-cursor-position-in-textareas/^{[The оригинальный источник больше не существует, измененная ссылка указывает на последнюю версию веб-архива]}

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

.. как только у вас есть выделение (указатель курсора в тексте), вы можете разделить ваш текст на новые строки, получив таким образом номер строки. Вы можете получить столбец, определив индекс с начала строки

Answer 2

Когда я хочу текущий номер строки textarea и текущий столбец textarea, я решил так:

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