How can you move the cursor to the last position of a textarea in Javascript?

Question

I have a textarea and a button on a form. The textarea may already have some text in it. I would like the cursor to move to the last position in the text area when the button is clicked.

Is this possible?

Answer 1

xgMz's answer was best for me. You don't need to worry about the browser:

var html = $("#MyTextArea").val();
$("#MyTextArea").focus().val("").val(html);

And here's a quick jQuery extension I wrote to do this for me next time:

; (function($) {
    $.fn.focusToEnd = function() {
        return this.each(function() {
            var v = $(this).val();
            $(this).focus().val("").val(v);
        });
    };
})(jQuery);

Use like this:

$("#MyTextArea").focusToEnd();

Answer 2

By “the last position”, do you mean the end of the text?

Changing the '.value' of a form field will move the cursor to the end in every browser except IE. With IE you have to get your hands dirty and deliberately manipulate the selection, using non-standard interfaces:

    if (browserIsIE) {
        var range= element.createTextRange();
        range.collapse(false);
        range.select();
    } else {
        element.focus();
        var v= element.value();
        element.value= '';
        element.value= v;
    }

Or do you mean put the cursor back to the place it was previously, the last time the textarea was focused?

In every browser except IE, this will already happen just by calling 'element.focus()'; the browser remembers the last cursor/selection position per input and puts it back on focus.

This would be quite tricky to reproduce in IE. You would have to poll all the time to check where the cursor/selection was, and remember that position if it was in an input element, then fetch the position for a given element when the button was pressed and restore it. This involves some really quite tedious manipulation of 'document.selection.createRange()'.

I'm not aware of anything in jQuery that would help you do this, but there might be a plugin somewhere perhaps?

Answer 3

You can also do this:

$(document).ready(function()
{
    var el = $("#myInput").get(0);

    var elemLen = el.value.length;

    el.selectionStart = elemLen;
    el.selectionEnd = elemLen;

    el.focus();
});​

This code works for both input and textarea . Tested with latest browsers: Firefox 23, IE 11 and Chrome 28.

jsFiddle available here: http://jsfiddle.net/cG9gN/1/

Source: https://stackoverflow.com/a/12654402/114029

Answer 4

您可以使用此https://github.com/DrPheltRight/jquery-caret

$('input').caretToEnd();

Answer 5

This is what I use for textareas inside my onclick or other events and seems to work fine for FireFox and IE 7 & 8. It positions the cursor at the end of the text instead of the front.

this.value = "some text I want to pre-populate";
this.blur();
this.focus();

Answer 6

To set mouse focus and move cursor to end of input. Its work in every browser, Its just simple logic here.

input.focus();
tmpStr = input.val();
input.val('');
input.val(tmpStr);

Answer 7

I modified @mkaj extension a little to support default value

; (function($) {
    $.fn.focusToEnd = function(defaultValue) {
        return this.each(function() {
            var prevValue = $(this).val();
            if (typeof prevValue == undefined || prevValue == "") {
                prevValue = defaultValue;
            }
            $(this).focus().val("").val(prevValue);
        });
    };
})(jQuery);

// See it in action here
$(element).focusToEnd("Cursor will be at my tail...");