最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Display current line and column number for a textarea - Stack Overflow

programmeradmin4浏览0评论

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.

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.

Share Improve this question edited Dec 29, 2011 at 15:42 Rob W 349k87 gold badges807 silver badges682 bronze badges asked May 12, 2009 at 8:54 alamaralamar 19.3k4 gold badges70 silver badges105 bronze badges
Add a comment  | 

2 Answers 2

Reset to default 13

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

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);
}
<textarea onkeyup="getLineNumberAndColumnIndex(this);" onmouseup="this.onkeyup();"></textarea>

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

发布评论

评论列表(0)

  1. 暂无评论