web-dev-qa-db-ja.com

'<textarea>'にテキストを追加するにはどうすればよいですか？

ユーザーが世界へのメッセージを入力できる<textarea>があります！以下にアップロードボタンがあります...アップロードしたファイルへのリンクを追加したいと思います（心配しないでください、私はそれを持っています）。彼が入力していたテキストのすぐ隣。

同様に、彼は「Hello、world！」と入力し、ファイルをアップロードし（AJAX経由で実行）、そのファイルへのリンクが次の行の<textarea>のコンテンツに追加されます。注意！カーソル（入力した場所）を同じ場所に保持することはできますか？

JQueryでできることはすべて...何かアイデアはありますか？ 'append（）'メソッドがあることは知っていますが、この状況ではそうではありませんよね？

javascriptjquerytextareahyperlinkadd
14
daGrevis

試してみてください

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

これにはしばらく時間がかかりましたが、次の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;

ただし、おそらくこれを関数でラップする必要があります。

7
fletom

次の回答 をご覧ください。これは、<textarea>のキャレット位置にテキストを挿入するためのNiceプラグインを示しています。

3
Darin Dimitrov

JQueryには 利用可能なキャレットプラグイン のいずれかを使用できます。基本的には次のとおりです。

  1. 現在のキャレット位置を保存します
  2. テキストをtextareaに追加します
  3. プラグインを使用してキャレットの位置を置き換えます

JQueryで「追加」関数が必要な場合は、次のように簡単に作成できます。

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

次に、入力フィールドを参照して.valAppend()を呼び出すことにより、 使用 できます。

1
Brad Christie

これには私の Rangy input jQueryプラグイン を使用できます。これはすべての主要なブラウザーで機能します。

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