Как добавить текст в '<textarea>'?

У меня <textarea>, где пользователь может ввести свое сообщение миру! Ниже, есть кнопки загрузки... Я хотел бы добавить ссылку на загруженный файл (не волнуйтесь, у меня есть); рядом с текстом, который он вводил.

Например, он вводит в "Hello, world!", затем загружает файл (его делается через AJAX), а ссылка на этот файл добавляется в следующую строку к содержимому <textarea>. Внимание! Можно ли удерживать курсор (место, где он оставил для ввода) в одном месте?

Все, что может быть сделано с помощью jQuery... Любые идеи? Я знаю, что есть метод 'append()', но это не будет для этой ситуации, правильно?

Ответы

Ответ 1

Try

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

Ответ 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;

Вероятно, вы должны обернуть это функцией.

Ответ 3

Вы можете посмотреть следующий ответ, который представляет собой хороший плагин для вставки текста в позицию каретки в <textarea>.

Ответ 4

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

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

Если вы хотите добавить функцию "добавить" в jQuery, достаточно просто сделать:

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

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

Ответ 5

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

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