Question

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

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

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

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

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

如何将光标设置为文本末尾 - 以便进一步输入？

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() + ' ');

它在textarea的末尾添加了一个空格，从而集中在最后。

Answer 3

非常简单的解决方案。

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

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

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

4 个答案: