CODEWITHSUNDEEP
javascriptjquerypositiontextareamouse-cursor
sol
sol

Reputation:

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

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?

Upvotes: 32

Views: 47822

Answers (7)

bn00d
bn00d

Reputation: 1146

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...");

Upvotes: 0

Leniel Maccaferri
Leniel Maccaferri

Reputation: 102458

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

Upvotes: 6

spilliton
spilliton

Reputation: 3941

You could use this https://github.com/DrPheltRight/jquery-caret

$('input').caretToEnd();

Upvotes: 4

Selvamani
Selvamani

Reputation: 7684

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);

Upvotes: 2

Ken
Ken

Reputation: 31

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();

Upvotes: 3

mkaj
mkaj

Reputation: 3489

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();

Upvotes: 35

bobince
bobince

Reputation: 536795

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?

Upvotes: 26

Related Questions