उत्परिवर्तन ऑब्सर्वर टेक्स्ट इनपुट फ़ील्ड्स में परिवर्तनों पर प्रतिक्रिया नहीं करता

Question

मैं अन्य ब्राउज़र में आईई-विशिष्ट वेबसाइट को अनुकूलित करने पर काम कर रहा हूं। उदाहरण के लिए, onpropertychange का व्यापक रूप से उपयोग किया गया है, और मैं उस व्यवहार को अनुकरण करने के लिए MutationObserver का उपयोग कर रहा हूं।

हालांकि, मैं इनपुट = टेक्स्ट फ़ील्ड में मूल्य परिवर्तनों पर प्रतिक्रिया करने के लिए उत्परिवर्तन ऑब्सर्वर नहीं प्राप्त कर सकता, न तो प्रोग्रामेटिक परिवर्तनों और न ही उपयोगकर्ता इनपुट पर।

पर विचार करें:।

<input type="text" name="test1" id="test1" /> 

और

var config = { attributes: true, childList: true, characterData: true, subtree: true }; 
var observer = new MutationObserver(function() { alert('success'); }); 
observer.observe(document.getElementById('test1'), config); 

अगर मैं ('test1') मान = 'कुछ' या कीबोर्ड इनपुट document.getElementById द्वारा मूल्य को बदलने की कोशिश, कुछ नहीं होता।

हालांकि, अगर मैं तत्व के बारे में कुछ और बदलने की कोशिश करता हूं, उदाहरण के लिए इसकी आईडी या नाम (जावास्क्रिप्ट द्वारा), उत्परिवर्तन ऑब्सर्वर आग लगती है।

वैल्यू चेंज और म्यूटेशन ऑब्सर्वर अन्य इनपुट प्रकारों, ईवेंट के साथ छिपे हुए फ़ील्ड के मूल्य के साथ ठीक काम करते हैं।

यह व्यवहार ब्राउज़र भर में संगत है।

क्या कोई जानता है कि मैं टेक्स्ट फ़ील्ड पर मूल्य परिवर्तन कैसे देख सकता हूं? या मुझे इसे अलग तरीके से संपर्क करना है?

Answer 1

MutationObserve का उपयोग डोम के परिवर्तनों को सुनने के लिए किया जाता है, लेकिन जब आप कुछ पात्रों को दर्ज या हटाते हैं, तो आप देखेंगे कि विशेषता मान नहीं बदला गया है।

var input = document.getElementById('name'); 
input.getAttributes('value') //alse "ZJZHOME" 
input.value     // now is "ZJZHO" 

आप देख सकते हैं कि यह डोम परिवर्तन नहीं किया है जब आप वर्णों को हटाने के लिए, हम, इसलिए:

name: <input type="text" id="name" value="ZJZHOME"> 

अब हम कुछ वर्ण, अब मान "ZJZHO" है हटा दें: इस तरह डोम बदलना चाहिए ...

मुझे लगता है कि हम निम्न विधि द्वारा इस समस्या को हल कर सकते हैं: अब वें

input.oninput = function(e) { 
    this.setAttribute('value', input.value) 
} 

ई उत्परिवर्तन पर्यवेक्षक फॉर्म फ़ील्ड की स्थिति में परिवर्तन देख सकते हैं।

---

मुझे आशा है कि आप समझ सकते हैं कि मैं क्या कहना ..... मेरी अंग्रेजी गरीब है .......... उपयोगकर्ता द्वारा ट्रिगर परिवर्तन के लिए