How do you get the cursor position in a textarea?

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

I thought of grabbing the position of the first newline character and the last newline character and then grabbing the position of the cursor.

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 grab the cursor position within the textarea?

Do you have a better suggestion for finding out if I am on the first or last line of a textarea?

jQuery solutions preferred unless javascript is as simple or simpler.

Any help is much appreciated.

---

If there is no selection, you can use the properties .selectionStart or .selectionEnd (with no selection they're equal).

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

Note that this is not supported in older browsers, most notably IE8-. There you'll have to work with text ranges, but it's a complete frustration.

I believe there is a library somewhere which is dedicated to getting and setting selections/cursor positions in input elements, though. I can't recall its name, but there seem to be dozens on articles about this subject.

---

I've done a fair amount of work on this and posted a function for getting caret/selection position in textareas on Stack Overflow several times. Unlike pretty much every other code to do this out there, it works properly with line breaks in IE < 9.

Here's an example question with some background:

Is there an Internet Explorer approved substitute for selectionStart and selectionEnd?

And here's a link to a jQuery plug-in I've written that includes this function and other selection-related textarea functions:

https://github.com/timdown/rangyinputs

---

Here's a cross browser function 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 like this:

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

Here's its complementary 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/

链接地址: http://www.djcxy.com/p/65466.html

上一篇: RichTextArea：使用TAB

下一篇: 你如何获得textarea中的光标位置？