JQUERY Set Textarea Cursor to End of Text

Question

http://jsfiddle.net/adamadam123/gEEVM/4/

I'm building a chat system that allows users to add emoticons.

Just like in the jsfiddler example above I take the current text in the textarea, combine it with the chosen emoticon symbol and then add this text back into the textarea.

$(function() {
    var data = $('textarea').val();
    var emoticon = ':)';
    $('textarea').val(data + emoticon);
    $('textarea').focus();
});

The problem is when I set the focus back into the textarea the cursor is at the beginning of the text.

How can I set the cursor to the end of the text - to allow further typing?

Possible duplicate: http://stackoverflow.com/questions/499126/jquery-set-cursor-position-in-text-area — Kevin Boucher, Nov 16 '12 at 22:29

DarkAjax · Accepted Answer · 2013-05-21T18:47:41.630

38

Something simple you can do is reset the text area's value:

$(function() {
    var data = $('textarea').val();
    var emoticon = ':)';
    $('textarea').focus().val('').val(data + emoticon);
});

edited May 21 '13 at 18:47

answered Nov 16 '12 at 22:31

DarkAjax

15,955
11
53
65

With this you stress the DOM when it happen frequently, you clear the textarea and then add a bunch of data AGAIN with some extra's. That's not an add,not a polite way to add data. – Codebeat Jul 31 '18 at 23:30

tozlu · Answer 2 · 2016-06-09T08:43:02.263

10

First focus, then set value. Just like this JSFiddle

$('textarea').focus();
$('textarea').val("New Text");

Another way is to add this after .focus();

$('textarea').val($('textarea').val() + ' ');

It adds a space to the end of the textarea thus focuses at the end.

edited Jun 09 '16 at 08:43

answered Nov 16 '12 at 22:34

tozlu

4,667
3
30
44

score 1 · Answer 3 · answered Nov 02 '13 at 22:34

1

A very simple solution.

var emoticon = ':)';
var val = $('#textarea').val();
$('#textarea').select().val(val + emoticon);

answered Nov 02 '13 at 22:34

ADI

19
1

score 0 · Answer 4 · edited May 23 '17 at 12:01

You should review this question:

jQuery Set Cursor Position in Text Area

Most elegant JQuery solution from there:

$.fn.selectRange = function(start, end) {
    return this.each(function() {
        if (this.setSelectionRange) {
            this.focus();
            this.setSelectionRange(start, end);
        } else if (this.createTextRange) {
            var range = this.createTextRange();
            range.collapse(true);
            range.moveEnd('character', end);
            range.moveStart('character', start);
            range.select();
        }
    });
};

With this, you can do

$('#elem').selectRange(3,5);

JQUERY Set Textarea Cursor to End of Text

4 Answers4

Linked