JQUERY Установите курсор Textarea в конец текста

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

Я создаю чат-систему, которая позволяет пользователям добавлять смайлики.

Как и в примере jsfiddler выше, я беру текущий текст в текстовом поле, объединяю его с выбранным символом смайлика, а затем добавляю этот текст обратно в текстовое поле.

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

Проблема заключается в том, что я устанавливаю фокус обратно в текстовое поле, курсор находится в начале текста.

Как я могу установить курсор в конец текста - чтобы разрешить дальнейшую ввод?

Ответ 1

Что-то простое, что вы можете сделать, это reset значение текстовой области:

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

Ответ 2

Сначала сфокусируйтесь, затем установите значение. Точно так же JSFiddle

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

Другой способ - добавить это после .focus();

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

Он добавляет пробел в конец текстового поля, таким образом, фокусируется в конце.

Ответ 3

A очень простое решение.

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

Ответ 4

Вы должны рассмотреть этот вопрос:

jQuery Установить положение курсора в текстовой области

Самое изящное решение JQuery оттуда:

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

С этим вы можете сделать

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