sự kiện thay đổi và xung đột thay đổi giá trị đầu vào có lập trình trên IE

Question

Tôi nhận thấy rằng trong các phiên bản Internet Explorer khác nhau, sự kiện onchangekhông bị bắt khi giá trị của đầu vào bị thay đổi bởi hàm js, hành vi không xảy ra với các trình duyệt khác như Mozilla hoặc Chrome.

tra một chút tôi thấy rằng các hoạt động chính xác của onchange trong IE không được bảo đảm khi giá trị bị thay đổi bởi js:

• onchange not fired on IE

• onchange not fired when autocomplete is on

  Ví dụ (thử nghiệm trên IE):

function onchangeRequest(){ 
 
    console.log('onchange fired'); 
 
} 
 

 
function changeValue (input){ 
 
    input.value += "hello" 
 
}

<h4> focus lost doesnt invoke onchangeRequest() </h4> 
 

 
<input id="valueInput" onkeyup="changeValue(this);" onchange="onchangeRequest();" /> 
 

 
<h4> focus lost invokes onchangeRequest() </h4> 
 

 
<input id="valueInput" onchange="onchangeRequest();" />

tôi đã không tìm thấy một lời giải thích thuyết phục trong những lý do tại sao IE không giải quyết những tình huống một cách chính xác. Đây có phải là "lỗi đã biết" mà chúng ta phải giải quyết không? Có bất kỳ tài liệu tham khảo chính thức nào mà nó được thông báo rằng IE không đảm bảo hành vi đúng của sự kiện trao đổi không?

Answer 1

Tôi đã tìm thấy rằng trong nhiều năm Microsoft theo một chiến lược theo đó nó didnt theo các tiêu chuẩn W3C trong trình duyệt của mình, nhưng hành vi này là đúng theo đặc điểm kỹ thuật riêng của IE:

Sự kiện onchange không cháy khi tùy chọn được chọn của đối tượng được chọn là thay đổi theo chương trình.

tham khảo: MSDN - onchange event

Một thể workaround để giải quyết vấn đề này và đưa ra giải pháp trình duyệt chéo của bạn sẽ là:

• onfocus: lưu các giá trị đầu vào trên một expando property
• onblur : gọi hàm js so sánh giá trị cũ với giá trị hiện tại.

Trong trường hợp thực tế của tôi, tôi cần kích hoạt hành động ajax ngay khi giá trị đầu vào thay đổi, do đó, sử dụng sự kiện onblur sự kiện mà không so sánh thay đổi sẽ dẫn đến nhiều cuộc gọi không cần thiết đến chương trình phụ trợ.

Dưới đây là một ví dụ:

function onchangeRequest(input){ 
 
    if(input.value != input.oldValue){ 
 
     console.log('value changed: do ajax request'); 
 
    }else{ 
 
     console.log('value didnt change'); 
 
    } 
 
} 
 

 
function changeValue (input){ 
 
    input.value += "add" 
 
}

<input id="valueInput" onkeyup="changeValue(this);" onfocus="this.oldValue = this.value;" onblur="onchangeRequest(this);" />