JQUERY 将 Textarea 光标设置为文本结尾答案

【问题标题】：JQUERY Set Textarea Cursor to End of TextJQUERY 将 Textarea 光标设置为文本结尾
【发布时间】：2012-11-16 22:27:36
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

可能重复：stackoverflow.com/questions/499126/…

标签： jquery html css

【解决方案1】：

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

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

【讨论】：

当它频繁发生时，您会向 DOM 施加压力，您清除文本区域，然后再次添加一堆数据和一些额外的数据。这不是添加，也不是添加数据的礼貌方式。

【解决方案2】：

首先聚焦，然后设置值。就像这样JSFiddle

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

另一种方法是在 .focus();

之后添加这个

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

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

【讨论】：

【解决方案3】：

非常简单的解决方案。

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

【讨论】：

【解决方案4】：

你应该复习这个问题：

jQuery Set Cursor Position in Text Area

最优雅的 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);

【讨论】：