Saya ingin menangkap jika ada perubahan yang terjadi <textarea>. Seperti mengetik karakter apa saja (menghapus, backspace) atau klik mouse dan tempel atau potong. Apakah ada acara jQuery yang dapat memicu untuk semua acara itu?

Saya mencoba mengubah acara, tetapi memicu callback hanya setelah keluar dari komponen.

Gunakan : Saya ingin mengaktifkan tombol jika a <textarea>mengandung teks apa pun.

Coba ini sebenarnya:

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

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

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

DEMO

Itu berfungsi untuk setiap perubahan yang Anda buat, mengetik, memotong, menempel.

bindsudah ditinggalkan. Gunakan on:

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

Catatan: Kode di atas akan aktif beberapa kali, satu kali untuk setiap tipe pemicu yang cocok. Untuk mengatasinya, lakukan sesuatu seperti ini:

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!");
});

Demo jsFiddle

Gunakan suatu inputacara.

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();
  }
});

Pertanyaan ini membutuhkan jawaban yang lebih mutakhir, dengan sumber-sumber. Inilah yang sebenarnya berhasil (meskipun Anda tidak harus mengambil kata saya untuk itu):

// 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: oninput di IE9 tidak menyala ketika kita menekan BACKSPACE / DEL / do CUT
3: https: // msdn .microsoft.com / en-us / library / ms536956 (v = vs.85) .aspx
4: http://api.jquery.com/prop/#prop-propertyName-function

TETAPI, untuk solusi yang lebih global yang dapat Anda gunakan di seluruh proyek Anda , saya sarankan menggunakan plugin textchange jQuery untuk mendapatkan acara baru yang kompatibel lintas-browser textchange. Ini dikembangkan oleh orang yang sama yang menerapkan onChangeacara yang setara untuk ReactJS Facebook, yang mereka gunakan untuk hampir seluruh situs web mereka. Dan saya pikir aman untuk mengatakan, jika itu solusi yang cukup kuat untuk Facebook, itu mungkin cukup kuat untuk Anda. :-)

PEMBARUAN: Jika Anda membutuhkan fitur seperti dukungan seret dan lepas di Internet Explorer, Anda mungkin ingin memeriksa pandellgarpu yang lebih baru diperbaruijquery-splendid-textchange .

2018, tanpa JQUERY

Pertanyaannya adalah dengan JQuery, itu hanya 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>

Ini versi lain (modern) tetapi sedikit berbeda dari yang disebutkan sebelumnya. Diuji dengan IE9:

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

Untuk browser yang sudah ketinggalan zaman, Anda juga dapat menambahkan selectionchangedan propertychange(seperti yang disebutkan dalam jawaban lain). Tetapi selectionchangetidak berhasil untuk saya di IE9. Itu sebabnya saya menambahkan keyup.

Coba lakukan dengan fokus

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

coba ini ...

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

              // Write your code here       
 });

.delegate adalah satu-satunya yang berfungsi untuk saya dengan jQuery JavaScript Library v2.1.1

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

Setelah beberapa percobaan saya datang dengan implementasi ini:

$('.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;
        }
    });

Menangani perubahan untuk segala jenis input dan memilih serta textareas mengabaikan tombol panah dan hal-hal seperti ctrl, cmd, tombol fungsi, dll.

Catatan: Saya hanya mencoba ini di FF karena ini untuk add-on FF.

Coba ini

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