इनपुट प्रकार टेक्स्ट

Question

पर प्रोग्रामेटिक परिवर्तनों का पता लगाएं क्या कोई स्क्रिप्ट इनपुट इनपुट टेक्स्ट के मान को बदलते समय सूचित करने का कोई तरीका है।

मैं

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

और एक स्क्रिप्ट

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

मैं पाठ के परिवर्तन की सूचना प्राप्त करना चाहते है।

मुझे पता है कि मुझे कीडाउन, कीप, ऑनब्लर इत्यादिरा द्वारा सूचित किया जा सकता है (जो काम करता है अगर मैं उपयोगकर्ता टाइपिंग को ट्रैक करने की कोशिश कर रहा हूं) लेकिन क्या परिवर्तन प्रोग्रामेटिक रूप से किया जाता है?

बहुत धन्यवाद

पेज। कोई JQuery कृपया या अगर jquery करता है तो कोई यह समझा सकता है कि यह इसे कैसे प्राप्त करता है।

Answer 1

आप एक आधुनिक ब्राउज़र साथ काम कर रहे हैं, तो आप कुछ इस तरह से कोशिश कर सकते हैं:

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; 
    } 
}); 

यह समाधान अच्छा है अगर आप वास्तव में किसी भी उम्मीद नहीं है उपयोगकर्ता इनपुट (यानी, छुपा प्रकार इनपुट फ़ील्ड), क्योंकि यह डीओएम मूल कार्यक्षमता के अत्यंत विनाशकारी है। यह याद रखना।

Answer 2

तुरन्त ट्रैक करने के लिए अगर एक परिवर्तन किया गया है हो सकता है एक ही रास्ता:

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

इसका मतलब यह है कि आप एक समारोह जो अगर एक परिवर्तन किया गया है की जाँच करने के अपने आप में हर 100 milisecond कहा जाता है बुला रहे हैं।

हो सकता है कि आप कुछ बेहतर करने के लिए प्रयास करें जब आप केवल कुछ और होने पर परीक्षण करने की कोशिश करते हैं, उदा। एक एक तत्व हो सकता है पर क्लिक करें ...

Answer 3

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

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

बस change घटना को सुन त्रुटि प्रवण जब मूल्य प्रोग्राम के रूप में बदल जाता है। लेकिन चूंकि आप मूल्य बदल रहे हैं, CustomEvent के साथ, दो पंक्तियां जोड़ें और परिवर्तन ईवेंट को आग लगाएं।

तो आप इस change घटना को पकड़ने के लिए सक्षम हो जाएगा, या तो इनलाइन:

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

या एक श्रोता के साथ:

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

यह लाभ है कि अगर आप एक निवेश है जो कर सकते हैं उपयोगकर्ता द्वारा बदला जा सकता है, आप उन घटनाओं (उपयोगकर्ता या स्क्रिप्ट से) को पकड़ सकते हैं

हालांकि यह इस तथ्य पर निर्भर करता है कि आप स्वयं प्रोग्रामेटिक रूप से हैं इनपुट के मूल्य को बदल रहा है। यदि आप पुस्तकालयों का उपयोग कर रहे हैं (जैसे datepickr) जो आपके इनपुट के मानों को बदलते हैं तो आपको कोड में जाना होगा और उन दो पंक्तियों को सही जगह पर जोड़ना होगा।