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

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

I'm building a chat system that allows users to add emoticons.

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

Just like in the jsfiddler example above I take the current text in the textarea, combine it with the chosen emoticon symbol and then add this text back into the textarea.

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

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

The problem is when I set the focus back into the textarea the cursor is at the beginning of the text.

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

How can I set the cursor to the end of the text - to allow further typing?

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

4 个解决方案

#1

Something simple you can do is reset the text area's value:

您可以做的一件事就是重置文本区域的值:

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

#2

First focus, then set value. Just like this JSFiddle

首先关注,然后设定价值。就像这个JSFiddle

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

Another way is to add this after .focus();

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

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

It adds a space to the end of the textarea thus focuses at the end.

它在textarea的末尾增加了一个空间,从而集中在最后。

#3

A very simple solution.

一个非常简单的解决方

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

#4

You should review this question:

你应该回顾这个问题:

jQuery Set Cursor Position in Text Area

jQuery在文本区域中设置光标位置

Most elegant JQuery solution from there:

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

With this, you can do

有了这个,你就可以做到

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

#1