Как добавить текст к '<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

Вы можете использовать для этого мой Rangy-плагин jQuery , который работает во всех основных браузерах.

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

Answer 5

Вы можете использовать любой из доступных каретных плагинов для jQuery и в основном:

1. Сохранить текущую позицию каретки
2. Добавить текст к текстовой области
3. Используйте плагин для замены позиции каретки

---

Если вам нужна функция «добавления» в jQuery, ее достаточно легко сделать:

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

Тогда вы можете использовать его , позвонив по номеру .valAppend(), ссылаясь на поля ввода.