JQUERY Définir le curseur de la zone de texte à la fin du texte

Question

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

Je construis un système de chat qui permet aux utilisateurs d'ajouter des émoticônes.

Comme dans l'exemple de jsfiddler ci-dessus, je prends le texte actuel dans la zone de texte, je le combine avec le symbole d'émoticône choisi, puis je réintroduis ce texte dans la zone de texte.

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

Le problème est que lorsque je remets le focus dans la zone de texte, le curseur se trouve au début du texte.

Comment puis-je placer le curseur à la fin du texte - pour permettre la poursuite de la saisie ?

Answer 1

Une chose simple que vous pouvez faire est de réinitialiser la valeur de la zone de texte :

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

Answer 2

D'abord la mise au point, puis le réglage de la valeur. Comme ceci JSFiddle

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

Une autre façon est d'ajouter ceci après .focus() ;

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

Il ajoute un espace à la fin de la zone de texte, ce qui permet de mettre l'accent sur la fin.

Answer 3

A très Une solution simple.

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

Answer 4

Vous devriez revoir cette question :

jQuery Définir la position du curseur dans la zone de texte

La solution JQuery la plus élégante qui soit :

$.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();
        }
    });
};

Avec cela, vous pouvez faire

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