Sự kiện cho thay đổi văn bản

Question

Tôi có thư viện JavaScript cập nhật ẩn<textarea> phần tử HTML với một số dữ liệu dựa trên một số thứ.

Trong ứng dụng (JavaScript) của tôi, tôi muốn biết khi nào các cập nhật này xảy ra mà không phải đi qua mã thư viện hiện có.

Tôi đã hy vọng có một sự kiện cho điều này, nhưng rõ ràng là không.

Tôi sẽ nghe những thay đổi của vùng văn bản như thế nào?

Thay đổi có thể đơn giản như document.getElementById("myTextarea").value = "hello";

EDIT tôi sẽ sử dụng FireFox chỉ, vì mã này sẽ chỉ là một phần của một bộ kiểm tra Tôi đang xây dựng.

Answer 1

Nếu bạn kiểm soát thư viện Javascript mà bạn đề cập, tôi sẽ nói cách dễ nhất là kích hoạt thủ công sự kiện change mỗi khi bạn thay đổi giá trị của trường.

Tôi nghĩ rằng đây là cách nó được thực hiện trong JQuery: Events/change Nếu không, một đơn giản document.getElementById('myTextarea').onchange() cũng có thể hoạt động.

Nếu bạn có nhiều cuộc gọi, bạn có thể bọc thay đổi giá trị và kích hoạt sự kiện thành chức năng changeFormElement(id, value).

Điều này đòi hỏi, tất nhiên, bạn có thể sửa đổi mọi trường hợp khi văn bản thay đổi. Nếu điều đó được đưa ra, đây có lẽ là cách thanh lịch nhất.

Answer 2

Sự kiện DOM không xảy ra khi giá trị cho nút được đặt lập trình thông qua node.value; Tìm kiếm tài liệu API của thư viện JavaScript của bạn và xem liệu chúng có cơ chế thông báo nào không.

CHỈNH SỬA: Firefox? Oh tuyệt vời, sau đó có chức năng thú vị như xem. Nó theo dõi những thay đổi về tài sản. Đối với bạn, điều này có nghĩa là khi thư viện thay đổi thuộc tính 'value' của vùng văn bản bạn nhận được thông báo. Điều gì tốt đẹp hơn, là bạn thậm chí có thể kiểm soát giá trị được giải quyết cho tài sản. Xem trong hành động.

var textnode = document.createElement('textarea'); 
textnode.watch('value', function(attr, oldv, newv){ 
    alert(newv); 
    return newv; // you have to return correct value back. 
}); 

//and now trigger the change to see that this works. 
textnode.value = 'Bla'; 

Có thể điều này sẽ giúp ích? :)

Answer 3

Tôi biết nó có thể không phải là những gì bạn muốn nghe nhưng chỉ có vẻ như IE có một sự kiện có thể xử lý việc này. Đó là sự kiện onpropertychange.

textArea.onpropertychange = function() 
{ 
    if (event.propertyName == "innerText") 
     alert('innerText has changed.'); 
} 

Nếu bạn được phép sửa đổi mã của thư viện, tôi sẽ làm như Pekka đã đề cập và điều chỉnh mã để kích hoạt sự kiện thay đổi. Điều duy nhất thực sự của trình duyệt chéo mà bạn có thể làm là sử dụng bộ hẹn giờ. Nếu bạn sử dụng bộ hẹn giờ tần số đủ thấp, có thể thậm chí không đáng chú ý với người dùng cuối mà bạn không sử dụng sự kiện.

Answer 4

Có tất nhiên một cách unelegant và dishonorificabilitudinitatible để đạt được điều này, bằng cách thiết lập một bộ đếm thời gian:

var oldVal, el; 
function setTimer(){ 
    setTimeout(function(){ 
     if(el.value != oldVal){ 
      console.log('something happened'); 
      oldVal = el.value; 
     } 
     setTimer(); 
    }, 5000); 
}; 

này sẽ so sánh giá trị mỗi năm giây với giá trị trong năm giây.

Answer 5

Trong FireFox, bạn có thể kéo dài tuổi value setter:

HTMLTextAreaElement.prototype.__defineSetter__("value", function(t) { 
    alert('someone is setting the value of a textarea'); 
    return this.textContent = t; 
}); 

Answer 6

Xin lưu ý, về giá trị textarea không hoạt động, nó hoạt động như "innerHTML", do đó sử dụng như

document.getElementById("myTextarea").innerHTML = "hello";