如何將文字附加到'<textarea>'？

Question

我有<textarea> ，用戶可以在這里向世界輸入他的信息！ 下面，有上傳按鈕...我想添加上傳文件的鏈接（不用擔心，我有它）; 就在他輸入的文本旁邊。

比如，他輸入'Hello，world！'，然后上傳文件（通過AJAX完成），並將該文件的鏈接添加到<textarea>內容的下一行。 注意！ 是否可以將光標（他離開的位置）保持在同一個地方？

所有這些都可以通過jQuery完成......任何想法？ 我知道有方法'append（）'，但不會出現這種情況，對吧？

Answer 1

嘗試

var myTextArea = $('#myTextarea');
myTextArea.val(myTextArea.val() + '\nYour appended stuff');

Answer 2

這花了我一段時間，但是下面的jQuery將完全按照您的意願執行 - 它不僅會附加文本，還會通過存儲光標然后重置它來將光標保持在完全相同的位置：

var selectionStart = $('#your_textarea')[0].selectionStart;
var selectionEnd = $('#your_textarea')[0].selectionEnd;

$('#your_textarea').val($('#your_textarea').val() + 'The text you want to append');

$('#your_textarea')[0].selectionStart = selectionStart;
$('#your_textarea')[0].selectionEnd = selectionEnd;

你可能應該將它包裝在一個函數中。

Answer 3

您可以查看以下答案 ，該答案提供了一個很好的插件，用於在<textarea>中的插入位置插入文本。

Answer 4

您可以使用jQuery的任何可用插入符插件 ，基本上：

1. 存儲當前的插入位置
2. 將文本附加到textarea
3. 使用插件替換插入位置

---

如果你想在jQuery中使用“append”函數，那么很容易做到：

(function($){
    $.fn.extend({
        valAppend: function(text){
            return this.each(function(i,e){
                var $e = $(e);
                $e.val($e.val() + text);
            });
        }
    });
})(jQuery);

然后，您可以通過調用.valAppend()引用輸入字段來使用它 。

Answer 5

您可以使用我的Rangy輸入jQuery插件 ，適用於所有主流瀏覽器。

var $textarea = $("your_textarea_id");
var sel = $textarea.getSelection();
$textarea.insertText("\nSome text", sel.end).setSelection(sel.start, sel.end);