6

I'm making a file edit interface in my web-app, I have a textarea with file contents.

When textarea is focused, I want to output the position of the cursor, i.e. line number and column: this is useful because error messages usually yield a line number, for example.

The question is: how do I figure out the position of the cursor in textarea? I'm using prototype library. Maybe there's a solution already?

I'm not really interested in fancy toolbars for the textarea, which are offered by those advanced widgets.

Rob W
  • 341,306
  • 83
  • 791
  • 678
alamar
  • 18,729
  • 4
  • 64
  • 97

2 Answers2

12

When I want the current line number of textarea and current column of textarea, I solved like this:

<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 );
  }
Aung Myat Hein
  • 4,018
  • 1
  • 36
  • 42
8

You may want to check out these 2 links:

http://www.dedestruct.com/2008/03/22/howto-cross-browser-cursor-position-in-textareas/[The orginal source does not exist any more, the modified link points to the latest version of the Web Archive]

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

..once you have a selection (cursor index in text), you can split your text by newlines, thus getting line number. you can get column by determining index from beginning of a line

Rob W
  • 341,306
  • 83
  • 791
  • 678
skrat
  • 5,518
  • 3
  • 32
  • 48