javascript sử dụng MutationObserver để phát hiện thay đổi giá trị trong thẻ đầu vào

Question

tôi muốn phát hiện khi thay đổi văn bản/giá trị trong trường nhập. Tôi đã đọc rất nhiều ví dụ và thử mã sau đây. Nhưng nó không hoạt động. Ở đây là fiddle preview. i thay đổi giá trị bằng mã js tôi muốn phát hiện những thay đổi đó.

html

<input type="text" id="exNumber"/> 

javascript

var observer = new MutationObserver(function(mutations) { 
    mutations.forEach(function(mutation) { 
    // console.log('Mutation type: ' + mutation.type); 
    if (mutation.type == 'childList') { 
     if (mutation.addedNodes.length >= 1) { 
     if (mutation.addedNodes[0].nodeName != '#text') { 
//  console.log('Added ' + mutation.addedNodes[0].tagName + ' tag.'); 
     } 
     } 
     else if (mutation.removedNodes.length >= 1) { 
     // console.log('Removed ' + mutation.removedNodes[0].tagName + ' tag.') 
     } 
    } 
    if (mutation.type == 'attributes') { 
     console.log('Modified ' + mutation.attributeName + ' attribute.') 
    } 
     }); 
}); 

var observerConfig = { 
     attributes: true, 
     childList: false, 
     characterData: false 
}; 

// Listen to all changes to body and child nodes 
var targetNode = document.getElementById("exNumber"); 
observer.observe(targetNode, observerConfig); 

Answer 1

Để hiểu những gì đang xảy ra là cần thiết để làm sáng tỏ sự khác biệt giữa thuộc tính (nội dung thuộc tính) và tài sản (IDL thuộc tính). Tôi sẽ không mở rộng về vấn đề này như trong SO đã có câu trả lời tuyệt vời bao gồm topic:

• Properties and Attributes in HTML
• .prop() vs .attr()
• What is happening behind .setAttribute vs .attribute=?

Khi bạn thay đổi nội dung của một nguyên tố input, bằng cách nhập hoặc bằng JS:

targetNode.value="foo"; 

trình duyệt cập nhật thuộc tính value nhưng không phải là thuộc tính value (phản ánh thuộc tính defaultValue thay thế).

Sau đó, nếu chúng ta nhìn vào spec of MutationObserver, chúng ta sẽ thấy rằng thuộc tính là một trong những thành viên đối tượng có thể được sử dụng. Vì vậy, nếu bạn một cách rõ ràng thiết lập các thuộc tính value:

targetNode.setAttribute("value", "foo"); 

MutationObserver sẽ thông báo cho một thay đổi thuộc tính. Nhưng không có gì giống như thuộc tính trong danh sách thông số: value thuộc tính không thể quan sát được.

Nếu bạn muốn phát hiện khi người dùng thay đổi nội dung của yếu tố đầu vào của bạn, thì input event là cách đơn giản nhất. Nếu bạn cần nắm bắt các sửa đổi JS, hãy truy cập setInterval và so sánh giá trị mới với giá trị cũ.

Kiểm tra điều này SO question để biết về các lựa chọn thay thế khác nhau và những hạn chế của nó.