2017-07-05 18 views
10

पर कार्यक्रम संबंधी इनपुट मूल्य परिवर्तन संघर्ष मैंने देखा है जब एक इनपुट का मूल्य एक js समारोह, व्यवहार है कि नहीं होती है उसमें कोई परिवर्तन किया जाता है कि इंटरनेट एक्सप्लोरर के विभिन्न संस्करणों में onchange घटना कब्जा नहीं कर रहा है मोज़िला या क्रोम जैसे अन्य ब्राउज़रों के साथ।onchange घटना और IE

एक छोटे से मैंने पाया कि जब मूल्य js द्वारा बदल दिया है IE में onchange के सही संचालन की गारंटी नहीं है जांच: 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();" />

मैं वजहों आईई उन स्थितियों को सही ढंग से समाधान नहीं करता है की एक ठोस स्पष्टीकरण नहीं मिला है। क्या यह एक "ज्ञात बग" है जिसे हमें सौदा करना है? क्या कोई आधिकारिक संदर्भ है जहां यह कहा गया है कि आईई विनिमय कार्यक्रम के सही व्यवहार की गारंटी नहीं देता है?

उत्तर

7

मैं ने पाया है कि कई वर्षों के लिए माइक्रोसॉफ्ट एक रणनीति फ्लॉप जिससे यह अपने ब्राउज़र में W3C मानकों का पालन करें पीछा किया, लेकिन व्यवहार IE के अपने विशेष निर्देशों के अनुसार सही है:

onchange घटना आग नहीं करता है जब चयनित ऑब्जेक्ट का चयनित विकल्प प्रोग्रामेटिक रूप से बदल गया है।

संदर्भ: MSDN - onchange event

एक संभावित वैकल्पिक हल इस समस्या को हल करने और बनाने के लिए अपने समाधान पार ब्राउज़र होगा:

  • onfocus: एक expando property
  • onblur पर इनपुट मूल्य को बचाने के : एक जेएस फ़ंक्शन को कॉल करें जो पुराने मान को वर्तमान मान के साथ तुलना करता है।

मेरे वास्तविक जीवन परिदृश्य में मैं इतना परिवर्तनों की तुलना बैकएंड के लिए अनावश्यक कॉल का एक बहुत में परिणाम होगा बिना onblur घटना का उपयोग कर, बस जब इनपुट मूल्य बदल एक ajax कार्रवाई पर सक्रिय होने चाहिए।

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);" />

:

यहाँ एक उदाहरण है