How to get cursor position in text box?

Question

I have a text field and I would like to know if I am on the last line in the text field or on the first line in the text field with my cursor with javascript.

I was thinking about grabbing the position of the first newline and last character of a newline, and then grabbing the cursor position.

var firstNewline = $('#myTextarea').val().indexOf('\n'); var lastNewline = $('#myTextarea').val().lastIndexOf('\n'); var cursorPosition = ?????; if (cursorPosition < firstNewline) // I am on first line. else if (cursorPosition > lastNewline) // I am on last line. 

• Is it possible to capture the cursor position in a text box?
• Do you have a better suggestion to find out if I am on the first or last line of a text field?

JQuery solutions are preferred if javascript is not simple or simple.

Any help is greatly appreciated.

Answer 1

If there is no choice, you can use the .selectionStart or .selectionEnd (they are equal without selection).

 var cursorPosition = $('#myTextarea').prop("selectionStart"); 

Please note that this is not supported in older browsers, especially IE8-. There you will have to work with text ranges, but this is a complete disappointment.

I believe there is a library somewhere that is dedicated to getting and setting the cursor selection / position in input elements. I can’t remember his name, but there seem to be dozens of articles on this subject.

Answer 2

I did a lot of work on this and placed a function in order to take the caret / select position in text environments several times in Stack Overflow. Unlike almost any other code, to do this there, it works correctly with line breaks in IE <9.

Here is a sample question with some background:

Is there an Internet Explorer approved replacement for selectStart and selectionEnd?

And here is a link to the jQuery plugin that I wrote that includes this function and other textarea related functions:

https://github.com/timdown/rangyinputs

Answer 3

Here's the cross browser function that I have in my standard library:

 function getCursorPos(input) { if ("selectionStart" in input && document.activeElement == input) { return { start: input.selectionStart, end: input.selectionEnd }; } else if (input.createTextRange) { var sel = document.selection.createRange(); if (sel.parentElement() === input) { var rng = input.createTextRange(); rng.moveToBookmark(sel.getBookmark()); for (var len = 0; rng.compareEndPoints("EndToStart", rng) > 0; rng.moveEnd("character", -1)) { len++; } rng.setEndPoint("StartToStart", input.createTextRange()); for (var pos = { start: 0, end: len }; rng.compareEndPoints("EndToStart", rng) > 0; rng.moveEnd("character", -1)) { pos.start++; pos.end++; } return pos; } } return -1; } 

Use it in your code as follows:

 var cursorPosition = getCursorPos($('#myTextarea')[0]) 

Here is its additional function:

 function setCursorPos(input, start, end) { if (arguments.length < 3) end = start; if ("selectionStart" in input) { setTimeout(function() { input.selectionStart = start; input.selectionEnd = end; }, 1); } else if (input.createTextRange) { var rng = input.createTextRange(); rng.moveStart("character", start); rng.collapse(); rng.moveEnd("character", end - start); rng.select(); } } 

http://jsfiddle.net/gilly3/6SUN8/

Answer 4

Here is the code to get the row number and column position

 function getLineNumber(tArea) { return tArea.value.substr(0, tArea.selectionStart).split("\n").length; } function getCursorPos() { var me = $("textarea[name='documenttext']")[0]; var el = $(me).get(0); var pos = 0; if ('selectionStart' in el) { pos = el.selectionStart; } else if ('selection' in document) { el.focus(); var Sel = document.selection.createRange(); var SelLength = document.selection.createRange().text.length; Sel.moveStart('character', -el.value.length); pos = Sel.text.length - SelLength; } var ret = pos - prevLine(me); alert(ret); return ret; } function prevLine(me) { var lineArr = me.value.substr(0, me.selectionStart).split("\n"); var numChars = 0; for (var i = 0; i < lineArr.length-1; i++) { numChars += lineArr[i].length+1; } return numChars; } 

tArea - text area DOM element

Answer 5

The getCursorPos () function will return the cursor position in GWT

  TextArea content = new TextArea(); content.getCursorPos();