jQueryでtextareaのchangeイベントにバインドするにはどうすればよいですか?


219

に変更があったかどうかをキャプチャし<textarea>ます。文字の入力(削除、バックスペース)またはマウスのクリックアンドペーストまたはカットと同様です。これらすべてのイベントをトリガーできるjQueryイベントはありますか?

変更イベントを試しましたが、コンポーネントからタブアウトした後でのみコールバックがトリガーされます。

使用:に<textarea>テキストが含まれている場合にボタンを有効にしたい。


18
マウスでテキストを変更できるため、キーイベントへのバインドだけでは不十分です(コンテキストメニューからの「貼り付け」/「切り取り」またはドラッグ&ドロップ)。
コンスタンティンスモリャニン2013年

同様の質問がTextarea onchange検出で説明されています。
dma_k 2014

回答:


333

これを実際に試してください:

$('#textareaID').bind('input propertychange', function() {

      $("#yourBtnID").hide();

      if(this.value.length){
        $("#yourBtnID").show();
      }
});

デモ

これは、変更、入力、切り取り、貼り付けのすべての変更で機能します。


5
@Senthilnathan:私にはChromeとFFでも機能しません。それがpropertychange存在しないためですinput
Blaster

4
テキスト領域でバックスペースキーが押されたときに、IE2ではこれらの2つのイベントのどちらも(古いバージョンのIEをチェックしていません)起動しないことに注意してください。
Zappa

26
これらのデモでは<input type="text">、ではなくを使用しています<textarea>
Ben Collins

5
IE9でも機能するように、「input propertychange」を「input change」に変更します。paulbakaus.com/2012/06/14/propertychange-on-internet-explorer-9
c0D3l0g1c

11
デモで<input type = "textarea" cols = "10" rows = "4" />を真剣に使用しているようですね。
DrLightman 2016

142

bind廃止予定です。使用on

$("#textarea").on('change keyup paste', function() {
    // your code here
});

注:上記のコードは、一致するトリガータイプごとに1回、複数回実行されます。これを処理するには、次のようにします。

var oldVal = "";
$("#textarea").on("change keyup paste", function() {
    var currentVal = $(this).val();
    if(currentVal == oldVal) {
        return; //check to prevent multiple simultaneous triggers
    }

    oldVal = currentVal;
    //action to be performed on textarea changed
    alert("changed!");
});

jsFiddleデモ


3
on("change", function() ....一部は私のために働いていません。アラートもコンソールログもトリガーしません。ただし、キーアップは魅力的です。
Sebastialonso

3
@Sebastialonso:on("change", function() ... は、textarea がフォーカスを失ったときにのみ発生しますこれについては、以前の質問を参照して、このフィドルで試してみてください。textareaを変更してから、textareaの外側をクリックすると、changeイベントが発生するのがわかります。
SNag 2014年

@SNagそのコードはChrome 45では機能しませんが、FF 41では機能します
DariusVE

あなたが立ち往生前のバージョン1.7へのjQueryを使用している場合は、しかし、これは適用されません
コードジョッキー

非推奨ではない関数での使用に賛成票を投じます。.bind()よりもはるかに優れています
Danny Harding

79

inputイベントを使用します。

var button = $("#buttonId");
$("#textareaID").on('input',function(e){
  if(e.target.value === ''){
    // Textarea has no value
    button.hide();
  } else {
    // Textarea has a value
    button.show();
  }
});

Internet Explorerの場合、正常に機能するには9以上、さらには10以上が必要です。
Udi、2015

1
このソリューションは魅力のように機能します。change()およびkeypress()イベントハンドラーの制限を完全に克服します。トンフォークに感謝します。
Vickar

25

この質問には、出典とともに、より最新の回答が必要でした。これは実際に機能するものです(ただし、私の言葉を使う必要はありません)。

// Storing this jQuery object outside of the event callback 
// prevents jQuery from having to search the DOM for it again
// every time an event is fired.
var $myButton = $("#buttonID")

// input           :: for all modern browsers [1]
// selectionchange :: for IE9 [2]
// propertychange  :: for <IE9 [3]
$('#textareaID').on('input selectionchange propertychange', function() {

  // This is the correct way to enable/disabled a button in jQuery [4]
  $myButton.prop('disabled', this.value.length === 0)

}

1:https
: //developer.mozilla.org/en-US/docs/Web/Events/input#Browser_compatibility 2:BACKSPACE / DEL / CUTを押すとIE9のoninputが起動しません
3:https:// msdn .microsoft.com / en-us / library / ms536956(v = vs.85).aspx
4:http : //api.jquery.com/prop/#prop-propertyName-function

ただし、プロジェクト全体で使用できるよりグローバルなソリューションの場合は、textchange jQueryプラグインを使用してブラウザー間の互換性のある新しいtextchangeイベントを取得することをお勧めします。FacebookのReactJS と同等のイベントを実装したのと同じ人が開発しonChangeもので、ほぼWebサイト全体で使用されています。そして、それがFacebookにとって十分に堅牢なソリューションであれば、おそらくあなたにとっても十分堅牢であると言っても安全だと思います。:-)

更新: Internet Explorerでのドラッグアンドドロップサポートなどの機能が必要な場合は、代わりにのpandell最近更新されたのフォークjquery-splendid-textchangeをチェックしてください。


「selectionchange」はドキュメントに適用した場合にのみ機能するようですが。アクティブな要素は「document.activeElement」で取得できます。
tfE

11

2018、JQUERYなし

問題はJQuery に関するもの、FYIだけです。

JS

let textareaID = document.getElementById('textareaID');
let yourBtnID = document.getElementById('yourBtnID');
textareaID.addEventListener('input', function() {
    yourBtnID.style.display = 'none';
    if (textareaID.value.length) {
        yourBtnID.style.display = 'inline-block';
    }
});

HTML

<textarea id="textareaID"></textarea>
<button id="yourBtnID" style="display: none;">click me</div>

4

これは別の(最新の)バージョンですが、前述のバージョンとは少し異なります。IE9でテスト済み:

$('#textareaID').on('input change keyup', function () {
  if (this.value.length) {
    // textarea has content
  } else {
    // textarea is empty
  }
});

古くなったブラウザについてはselectionchangepropertychange(他の回答で述べたように)andを追加することもできます。しかしselectionchange、IE9では動作しませんでした。それが私が追加しkeyupた理由です。


2

focusoutでそれをやってみてください

$("textarea").focusout(function() {
   alert('textarea focusout');
});

1

これを試して ...

$("#txtAreaID").bind("keyup", function(event, ui) {                          

              // Write your code here       
 });

7
マウスでテキストを変更できるため、キーイベントへのバインドだけでは不十分です(コンテキストメニューからの「貼り付け」/「切り取り」またはドラッグ&ドロップ)。
Konstantin Smolyanin 2013年

1

.delegateは、jQuery JavaScriptライブラリv2.1.1で動作している唯一のものです

 $(document).delegate('#textareaID','change', function() {
          console.log("change!");
    });

0

いくつかの実験の後、私はこの実装を思いつきました:

$('.detect-change')
    .on('change cut paste', function(e) {
        console.log("Change detected.");
        contentModified = true;
    })
    .keypress(function(e) {
        if (e.which !== 0 && e.altKey == false && e.ctrlKey == false && e.metaKey == false) {
            console.log("Change detected.");
            contentModified = true;
        }
    });

あらゆる種類の入力と選択への変更を処理し、矢印キーやctrl、cmd、ファンクションキーなどを無視するテキストエリアを処理します。

注:FFアドオン用であるため、FFでのみこれを試しました。


-11

これを試して

 $('textarea').trigger('change');
 $("textarea").bind('cut paste', function(e) { });

これは完全に間違っているわけではありません。実際、1つを組み合わせる$("#textarea").on('change keyup paste', function() {})と、自動的に$('textarea').trigger('change');機能するのpasteを妨げる問題に対処できる場合は、!
loretoparisi
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.