jquery - JQUERY 将 Textarea 光标设置为文本结尾

Question

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

我正在构建一个允许用户添加表情符号的聊天系统。

就像上面的 jsfiddler 示例一样，我在 textarea 中获取当前文本，将其与选择的表情符号组合，然后将此文本添加回 textarea。

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

问题是当我将焦点设置回文本区域时，光标位于文本的开头。

如何将光标设置到文本的末尾 - 以允许进一步输入？

Answer 1

您可以做的一些简单的事情是重置文本区域的值：

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

Answer 2

先聚焦，再设定价值。就像这个JSFiddle

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

另一种方法是在.focus();之后添加它。

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

它在文本区域的末尾添加了一个空格，因此集中在末尾。

Answer 3

一个非常简单的解决方案。

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

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