Mostrar la línea actual y el número de columna para un área de texto

Question

Estoy haciendo una interfaz de edición de archivos en mi aplicación web, tengo un área de texto con contenido de archivos.

Cuando se enfoca textarea, quiero mostrar la posición del cursor, es decir, el número de línea y la columna: esto es útil porque los mensajes de error suelen dar un número de línea, por ejemplo.

La pregunta es: ¿cómo averiguo la posición del cursor en textarea? Estoy usando una biblioteca de prototipos. Tal vez ya hay una solución?

No me interesan realmente las sofisticadas barras de herramientas para el área de texto, que ofrecen esos widgets avanzados.

Answer 1

Es posible que desee echa un vistazo a estos 2 enlaces:

http://www.dedestruct.com/2008/03/22/howto-cross-browser-cursor-position-in-textareas/^{[La fuente original no existe más, los puntos de enlace modificados a la versión más reciente del Archivo Web]}

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

..una vez que tiene una selección (índice de cursor en el texto), puede dividir su texto por líneas nuevas, obteniendo así el número de línea. se puede obtener mediante la determinación de la columna índice de principio de una línea

Answer 2

Cuando quiero el número de línea actual del área de texto y la columna actual del área de texto, he resuelto de esta manera:

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