Phát hiện các thay đổi có lập trình trên văn bản kiểu nhập

Question

Có cách nào để nhận thông báo khi tập lệnh thay đổi giá trị của văn bản loại đầu vào hay không.

Tôi có

<input id='test' type='text' /> 

và một kịch bản

document.getElementById('test').value = 'bbb'; 

Tôi muốn được thông báo về sự thay đổi của văn bản.

Tôi biết tôi có thể được thông báo bằng cách nhấn phím, keyup, onblur etcetera (hoạt động nếu tôi đang cố gắng theo dõi việc nhập người dùng) nhưng điều gì sẽ xảy ra nếu thay đổi được thực hiện theo chương trình?

Rất cám ơn

p.s. Không JQuery xin vui lòng hoặc nếu jquery nó có ai đó có thể giải thích làm thế nào nó đạt được nó.

Answer 1

Nếu bạn đang làm việc với một trình duyệt hiện đại, bạn có thể thử với một cái gì đó như thế này:

var input = document.getElementById('test'); 
input._value = input.value; 
Object.defineProperty(input, "value", { 
    get: function() {return this._value;}, 
    set: function(v) { 
     // Do your stuff 
     this._value = v; 
    } 
}); 

Giải pháp này là tốt nếu bạn thực sự không mong đợi bất kỳ đầu vào của người dùng (ví dụ: các trường nhập kiểu ẩn), vì đó là cực kỳ phá hoại của chức năng cơ bản DOM. Ghi nhớ nó trong tâm trí.

Answer 2

Cách duy nhất để theo dõi ngay lập tức nếu có sự thay đổi đã được thực hiện sẽ là:

var value = document.getElementById('test').value; 

function trackChanges(oldVal) { 
    var newVal = document.getElementById('test').value; 

    if (newVal !== oldVal) { 
     alert('Changes occured!'); 
    } 

    var fn = function() { trackChanges(newVal); }; 

    setTimeout(fn(),100); 
} 

setTimeout(trackChanges(value), 100); 

điều này có nghĩa bạn đang gọi một chức năng được gọi là mỗi 100 milisecond bởi chính nó để kiểm tra xem một sự thay đổi đã được thực hiện.

Có thể bạn đang tìm kiếm điều gì đó tốt hơn khi cố gắng chỉ kiểm tra xem có điều gì khác xảy ra hay không, ví dụ: một nhấp chuột vào một phần tử có thể ...

Answer 3

tôi tìm ra cách đơn giản nhất là để thực sự kích hoạt sự kiện bằng tay:

document.getElementById('test').value = 'bbb'; 
var evt = new CustomEvent('change'); 
document.getElementById('test').dispatchEvent(evt); 

Chỉ cần nghe sự kiện change là dễ bị lỗi khi giá trị được thay đổi theo chương trình. Nhưng vì bạn đang thay đổi giá trị, hãy thêm hai dòng và kích hoạt sự kiện thay đổi, với CustomEvent.

sau đó bạn sẽ có thể bắt sự kiện change này, hoặc inline:

<input id="test" onchange="console.log(this)"> 

hoặc với một người biết lắng nghe:

document.getElementById('test').addEventListener('change',function(event) { 
    console.log(event.target); 
}); 

này có ưu điểm là nếu bạn có một đầu vào mà có thể được người dùng thay đổi, bạn có thể nắm bắt cả hai sự kiện đó (từ người dùng hoặc tập lệnh)

tuy nhiên điều này phụ thuộc vào thực tế bạn là chính mình theo chương trình thay đổi giá trị của đầu vào. Nếu bạn đang sử dụng thư viện (chẳng hạn như datepickr) thay đổi giá trị của các yếu tố đầu vào, bạn có thể phải nhận được mã và thêm hai dòng đó vào đúng vị trí.