Tôi muốn nắm bắt nếu có bất kỳ thay đổi nào xảy ra <textarea>. Giống như gõ bất kỳ ký tự nào (xóa, xóa lùi) hoặc nhấp chuột và dán hoặc cắt. Có một sự kiện jQuery có thể kích hoạt cho tất cả các sự kiện đó không?

Tôi đã thử thay đổi sự kiện, nhưng nó chỉ kích hoạt cuộc gọi lại sau khi bỏ qua thành phần.

Sử dụng : Tôi muốn kích hoạt một nút nếu <textarea>chứa bất kỳ văn bản nào.

Hãy thử điều này thực sự:

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

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

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

BẢN GIỚI THIỆU

Điều đó làm việc cho bất kỳ thay đổi bạn thực hiện, gõ, cắt, dán.

bindbị phản đối Sử dụng on:

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

Lưu ý: Mã ở trên sẽ kích hoạt nhiều lần, một lần cho mỗi loại kích hoạt phù hợp. Để xử lý điều đó, hãy làm một cái gì đó như thế này:

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

Trình diễn jsFiddle

Sử dụng một inputsự kiện.

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

Câu hỏi này cần một câu trả lời cập nhật hơn, với các nguồn. Đây là những gì thực sự hoạt động (mặc dù bạn không cần phải tin lời tôi):

// 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_compabilities
2: oninput trong IE9 không kích hoạt khi chúng tôi nhấn BACKSPACE / DEL / do CUT
3: https: // msdn .microsoft.com / en-us / library / ms536956 (v = vs85) .aspx
4: http://api.jquery.com/prop/#prop-propertyName-f ghép

NHƯNG, đối với một giải pháp toàn cầu hơn mà bạn có thể sử dụng trong suốt dự án của mình , tôi khuyên bạn nên sử dụng plugin jQuery trao đổi văn bản để có được một textchangesự kiện tương thích với nhiều trình duyệt mới . Nó được phát triển bởi cùng một người đã triển khai onChangesự kiện tương đương cho ReactJS của Facebook, họ sử dụng cho gần như toàn bộ trang web của họ. Và tôi nghĩ thật an toàn khi nói rằng, nếu đó là một giải pháp đủ mạnh cho Facebook, thì nó có lẽ đủ mạnh cho bạn. :-)

CẬP NHẬT: Nếu bạn tình cờ cần các tính năng như hỗ trợ kéo và thả trong Internet Explorer, thay vào đó bạn có thể muốn kiểm tra pandellngã ba được cập nhật gần đây củajquery-splendid-textchange .

2018, không có YÊU CẦU

Câu hỏi là với JQuery, đó chỉ là FYI.

Mã não

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>

Đây là phiên bản khác (hiện đại) nhưng hơi khác so với phiên bản đã đề cập trước đó. Đã thử nghiệm với IE9:

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

Đối với các trình duyệt lỗi thời, bạn cũng có thể thêm selectionchangevà propertychange(như đã đề cập trong các câu trả lời khác). Nhưng selectionchangeđã không làm việc cho tôi trong IE9. Đó là lý do tại sao tôi thêm vào keyup.

Cố gắng làm điều đó với trọng tâm

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

thử cái này ...

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

              // Write your code here       
 });

.delegate là người duy nhất làm việc với tôi với jQuery JavaScript Library v2.1.1

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

Sau một số thử nghiệm, tôi đã đưa ra cách thực hiện này:

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

Xử lý thay đổi đối với bất kỳ loại đầu vào nào và chọn cũng như textareas bỏ qua các phím mũi tên và những thứ như ctrl, cmd, phím chức năng, v.v.

Lưu ý: Tôi chỉ thử điều này trong FF vì nó là một tiện ích bổ sung FF.

Thử cái này

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