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?

Answer 1

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

Answer 2

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.