jQueryを使用してtextareaにテキストを挿入する


151

アンカータグをクリックしたときに、jqueryを使用してテキスト領域にテキストを挿入する方法を知りたいのですが。

textareaに既にあるテキストを置き換えたくありません。textareaに新しいテキストを追加したいと思います。


1
これが解決策である場合-ただし、自分で構築することをお勧めします。それは私が友人のためにやっている個人のブログなので、これに合うものなら何でも。
Oliver Stubley、2009年

したがって、テキストを選択し、どちらを選択したい場合でも、jqueryを使用してtextareaにデータを入力します。その場合、このテキストはどこから取得されたものですか、手動で入力されたものですか、特別なタグから入力されたものですか。
TStamper 2009年

TStamper、ボタンをクリックできるようにしたいのですが、クリックした内容に応じてテキストをtextareaに挿入します。
Oliver Stubley、2009年

「太字」というラベルの付いたボタンをクリックすると、テキスト領域で太字が必要になりますか?
TStamper 2009年

太字のテキストではなく太字のタグ(おそらくHTMLではなくカスタム)
Oliver Stubley

回答:


125

Jasonのコメントにあるものから、以下を試してください。

$('a').click(function() //this will apply to all anchor tags
{ 
   $('#area').val('foobar'); //this puts the textarea for the id labeled 'area'
})

編集 -テキストに追加するには以下を見てください

$('a').click(function() //this will apply to all anchor tags
{ 
   $('#area').val($('#area').val()+'foobar'); 
})

テキストを追加するはるかに簡単な方法については、私の答えを確認してください
Jason

8
@ Jason-申し訳ありませんが、appendはhtml要素で始まるhtmlデータを期待していますex:<p
TStamper

結果がPHPページからのものであり、jQueryによって処理される場合はどうでしょうか?(データはJsonを使用して送信されます)
Abu Rayane

186

私はjQuery関数拡張が好きです。ただし、これはDOMオブジェクトではなくjQueryオブジェクトを指します。だから私はそれをさらに良くするために少し修正しました(一度に複数のテキストボックス/テキストエリアで更新できます)。

jQuery.fn.extend({
insertAtCaret: function(myValue){
  return this.each(function(i) {
    if (document.selection) {
      //For browsers like Internet Explorer
      this.focus();
      var sel = document.selection.createRange();
      sel.text = myValue;
      this.focus();
    }
    else if (this.selectionStart || this.selectionStart == '0') {
      //For browsers like Firefox and Webkit based
      var startPos = this.selectionStart;
      var endPos = this.selectionEnd;
      var scrollTop = this.scrollTop;
      this.value = this.value.substring(0, startPos)+myValue+this.value.substring(endPos,this.value.length);
      this.focus();
      this.selectionStart = startPos + myValue.length;
      this.selectionEnd = startPos + myValue.length;
      this.scrollTop = scrollTop;
    } else {
      this.value += myValue;
      this.focus();
    }
  });
}
});

これは本当にうまくいきます。次のように、一度に複数の場所に挿入できます。

$('#element1, #element2, #element3, .class-of-elements').insertAtCaret('text');

3
末尾に})があるので、最初は解決策が機能しないと考えましたが、修正後、IE7とFF3.5でうまく機能しました。TEXTAREA要素のキャレットにテキストを挿入できます。ありがとうございました!
フィリップ

1
これはChromeでも機能します。時間を節約してくれてありがとう:)そして、元のコードについて@Thinkerに感謝します。
Veli Gebrev

グーグル検索からここに来た..。私はあなたの答えが1年前のものであることを知っていますが、これに感謝します。魅力的な作品
Mike Turley

6
されるselグローバルであることを意図?
qwertymk 2012

1
coffeescriptバージョンを必要とする人のために:gist.github.com/zachaysan/7100458
zachaysan

47

私は自分のコードでこの関数を使用しています:

$.fn.extend({
  insertAtCaret: function(myValue) {
    this.each(function() {
      if (document.selection) {
        this.focus();
        var sel = document.selection.createRange();
        sel.text = myValue;
        this.focus();
      } else if (this.selectionStart || this.selectionStart == '0') {
        var startPos = this.selectionStart;
        var endPos = this.selectionEnd;
        var scrollTop = this.scrollTop;
        this.value = this.value.substring(0, startPos) +
          myValue + this.value.substring(endPos,this.value.length);
        this.focus();
        this.selectionStart = startPos + myValue.length;
        this.selectionEnd = startPos + myValue.length;
        this.scrollTop = scrollTop;
      } else {
        this.value += myValue;
        this.focus();
      }
    });
    return this;
  }
});
input{width:100px}
label{display:block;margin:10px 0}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Copy text from: <input id="in2copy" type="text" value="x"></label>
<label>Insert text in: <input id="in2ins" type="text" value="1,2,3" autofocus></label>
<button onclick="$('#in2ins').insertAtCaret($('#in2copy').val())">Insert</button>

それは100%私のものではありません、私はどこかでそれをググって、それから私のアプリのために調整しました。

使用法: $('#element').insertAtCaret('text');


挿入されたテキストも強調表示されますか?
Oliver Stubley、2009年

2
しかし、ユーザーがカーソルをどこかに戻すと、その解決策は機能しません:)とにかく、気にしないでください。
Thinker

3
ラップされたセットと要素の両方として 'this'を使用します。hmmm ..試してみたが編集なしでは機能しない
スコットエバーデン

4
このコードも機能しませんでした。私はjQueryを使用しています。テキストエリアとテキストフィールドの両方を試しました。私は、など。)(例えばthis.valueはthis.valあるべきと考えている
ニック・

1
はい、IEではDOMの先頭に挿入し続け、Foxでは何もしませんでした。最新のJQueryを使用しています...
Caveatrob 2010

19

私はこれが古い質問であることを知っていますが、この解決策を探している人にとって、textareaにコンテンツを追加するためにappend()を使用してはいけないことは注目に値します。append()メソッドは、textareaの値ではなくinnerHTMLをターゲットにします。コンテンツはテキストエリアに表示される場合がありますが、要素のフォーム値には追加されません。

上記のように使用:

$('#textarea').val($('#textarea').val()+'new content'); 

正常に動作します。


13

これにより、テキストの一部をテキストボックスに「挿入」できます。挿入とは、カーソルがある場所にテキストを追加することです。

function inyectarTexto(elemento,valor){
 var elemento_dom=document.getElementsByName(elemento)[0];
 if(document.selection){
  elemento_dom.focus();
  sel=document.selection.createRange();
  sel.text=valor;
  return;
 }if(elemento_dom.selectionStart||elemento_dom.selectionStart=="0"){
  var t_start=elemento_dom.selectionStart;
  var t_end=elemento_dom.selectionEnd;
  var val_start=elemento_dom.value.substring(0,t_start);
  var val_end=elemento_dom.value.substring(t_end,elemento_dom.value.length);
  elemento_dom.value=val_start+valor+val_end;
 }else{
  elemento_dom.value+=valor;
 }
}

そして、あなたはこのようにそれを使うことができます:

<a href="javascript:void(0);" onclick="inyectarTexto('nametField','hello world');" >Say hello world to text</a>

「タグをテキストに挿入する」機能があると面白いし、もっと意味があります。

すべてのブラウザで動作します。


5
@temoto:英語以外の変数名への反対投票?現状のままで完全に読み取り可能です。回答が役に立たない場合は、下向き投票ボタンを使用することになっていますが、ここではそうではありません。ところで、それはあなたが反対票を投じるときあなたにいくつかの評判を要します。
ジョシュM.

スペイン語のコードを理解するのにしばらくかかりました。このコードにはバグがあります。テキストボックスの最後ではなく、常に最初に挿入されていました。例:テキストが:親愛なるユーザーとクリックすると、テキストユーザーの後ではなく、親愛なる前に挿入されました。
Dev

@JoshM。事は、これはここでThinkerによって書かれたより古くより完全な回答の複製です...彼は.focus()呼び出しの一部selectionStartselectionEnd、変更後の更新を取り出しました。スペイン語の変数は別の答​​えを正当化するために使用された可能性があります...
CPHPython

12

Hejこれは私のためにFF @leastで問題なく動作し、キャレット位置に挿入される修正バージョンです

  $.fn.extend({
  insertAtCaret: function(myValue){
  var obj;
  if( typeof this[0].name !='undefined' ) obj = this[0];
  else obj = this;

  if ($.browser.msie) {
    obj.focus();
    sel = document.selection.createRange();
    sel.text = myValue;
    obj.focus();
    }
  else if ($.browser.mozilla || $.browser.webkit) {
    var startPos = obj.selectionStart;
    var endPos = obj.selectionEnd;
    var scrollTop = obj.scrollTop;
    obj.value = obj.value.substring(0, startPos)+myValue+obj.value.substring(endPos,obj.value.length);
    obj.focus();
    obj.selectionStart = startPos + myValue.length;
    obj.selectionEnd = startPos + myValue.length;
    obj.scrollTop = scrollTop;
  } else {
    obj.value += myValue;
    obj.focus();
   }
 }
})

10

やってみました:

$("#yourAnchor").click(function () {
    $("#yourTextarea").val("your text");
});

ただし、自動ハイライトについてはわかりません。

編集

追加するには:

$("#yourAnchor").click(function () {
    $("#yourTextarea").append("your text to append");
});

おかげで私は試してみるつもりです。私はjQueryを初めて使用するので、使いやすい関数のすべてを認識していません。
Oliver Stubley、2009年

私も比較的新しいです。慣れれば、楽しくて簡単です。詳細については、こちらをご覧ください:docs.jquery.com/Main_Page
Jason

5
以下のマーカスで述べたようappend()に、の値には機能しませんtextarea。このappend()メソッドは、textareaの値ではなく、innerHTMLをターゲットにします。
Turadg

6

あなたが求めるものはjQueryで合理的に簡単でなければなりません-

$(function() {
    $('#myAnchorId').click(function() { 
        var areaValue = $('#area').val();
        $('#area').val(areaValue + 'Whatever you want to enter');
    });
});

挿入されたテキストを強調表示することを考えることができる最良の方法は、CSSクラスを使用してスパンにラップすることです background-colorは、選択した色に設定されです。次の挿入時に、既存のスパンからクラスを削除する(またはスパンを取り除く)ことができます。

しかし、市場には無料のWYSIWYG HTML / Rich Textエディターがたくさんあります。きっとあなたのニーズに合うでしょう。


5

jQuery 1.9以降で機能する簡単なソリューションを次に示します。

a)キャレット位置を取得します。

function getCaret(el) {
        if (el.prop("selectionStart")) {
            return el.prop("selectionStart");
        } else if (document.selection) {
            el.focus();

            var r = document.selection.createRange();
            if (r == null) {
                return 0;
            }

            var re = el.createTextRange(),
                    rc = re.duplicate();
            re.moveToBookmark(r.getBookmark());
            rc.setEndPoint('EndToStart', re);

            return rc.text.length;
        }
        return 0;
    };

b)キャレット位置にテキストを追加します:

function appendAtCaret($target, caret, $value) {
        var value = $target.val();
        if (caret != value.length) {
            var startPos = $target.prop("selectionStart");
            var scrollTop = $target.scrollTop;
            $target.val(value.substring(0, caret) + ' ' + $value + ' ' + value.substring(caret, value.length));
            $target.prop("selectionStart", startPos + $value.length);
            $target.prop("selectionEnd", startPos + $value.length);
            $target.scrollTop = scrollTop;
        } else if (caret == 0)
        {
            $target.val($value + ' ' + value);
        } else {
            $target.val(value + ' ' + $value);
        }
    };

c)例

$('textarea').each(function() {
  var $this = $(this);
  $this.click(function() {
    //get caret position
    var caret = getCaret($this);

    //append some text
    appendAtCaret($this, caret, 'Some text');
  });
});

3

Chrome 20.0.11ではうまく機能します

var startPos = this[0].selectionStart;
var endPos = this[0].selectionEnd;
var scrollTop = this.scrollTop;
this[0].value = this[0].value.substring(0, startPos) + myVal + this[0].value.substring(endPos, this[0].value.length);
this.focus();
this.selectionStart = startPos + myVal.length;
this.selectionEnd = startPos + myVal.length;
this.scrollTop = scrollTop;

1

置き換えずにコンテンツをテキストエリアに追加したい場合は、以下を試すことができます

$('textarea').append('Whatever need to be added');

あなたのシナリオによると、それは

$('a').click(function() 
{ 
  $('textarea').append($('#area').val()); 
})

0

これがいいと思います

$(function() {
$('#myAnchorId').click(function() { 
    var areaValue = $('#area').val();
    $('#area').val(areaValue + 'Whatever you want to enter');
});
});

0

他のスクリプトのいくつかがあなたのケースで機能しない場合のために、ここでも別の解決策が説明されています。


0

これは、マイナーなバグが修正された@panchicoreの回答に似ています。

function insertText(element, value) 
{
   var element_dom = document.getElementsByName(element)[0];
   if (document.selection) 
   {
      element_dom.focus();
      sel = document.selection.createRange();
      sel.text = value;
      return;
    } 
   if (element_dom.selectionStart || element_dom.selectionStart == "0") 
   {
     var t_start = element_dom.selectionStart;
     var t_end = element_dom.selectionEnd;
     var val_start = element_dom.value.substring(value, t_start);
     var val_end = element_dom.value.substring(t_end, element_dom.value.length);
     element_dom.value = val_start + value + val_end;
   } 
   else
   {
      element_dom.value += value;
   }
}

0

簡単な解決策は次のようになります:(仮定テキストボックスに入力したものはすべて、テキストエリアにすでにあるものに追加したい

<a>タグのonClickイベントで、これを行うユーザー定義関数を記述します。

function textType(){

  var **str1**=$("#textId1").val();

  var **str2**=$("#textId2").val();

  $("#textId1").val(str1+str2);

}

(ids、textId1 -o / p textArea textId2 -for i / p textbox ')


0
$.fn.extend({
    insertAtCaret: function(myValue) {
        var elemSelected = window.getSelection();
        if(elemSelected) {
            var startPos = elemSelected.getRangeAt(0).startOffset;
            var endPos = elemSelected.getRangeAt(0).endOffset;
            this.val(this.val().substring(0, startPos)+myValue+this.val().substring(endPos,this.val().length));
        } else {
            this.val(this.val()+ myValue) ;
        }
    }
});

-1

私はそれを使用し、それはうまくいきます:)

$("#textarea").html("Put here your content");

レミ


1
いいえ、ありません。textareaのhtmlを変更すると、そこにコンテンツが表示されますが、FORMを保存すると、フォームは内部HTMLではなくtextarea値を必要とするため、機能しません。
tothemario
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.