JQuery का उपयोग करके एक <input type = "text"> (तुरंत) में सभी परिवर्तनों का पता लगाएँ

Question

कई तरीकों से मूल्य <input type="text">बदल सकते हैं, जिनमें शामिल हैं:

• keypresses
• कॉपी पेस्ट
• जावास्क्रिप्ट के साथ संशोधित
• ब्राउज़र या टूलबार द्वारा स्वतः पूर्ण

मैं चाहता हूं कि किसी भी समय यह बदलने के लिए मेरा जावास्क्रिप्ट फ़ंक्शन (वर्तमान इनपुट मूल्य के साथ) कहा जाए। और मैं चाहता हूं कि इसे तुरंत कहा जाए, न कि केवल तब जब इनपुट ध्यान केंद्रित करता है।

मैं सभी ब्राउज़रों में ऐसा करने के लिए सबसे साफ और सबसे मजबूत तरीके की तलाश कर रहा हूं (अधिमानतः jQuery का उपयोग करके)।

Comments

Stackoverflow.com/questions/574941/… और stackoverflow.com/questions/1847893/… पर

— Crescent Fresh

stackoverflow.com/questions/1159046/…

— andres descalzo

Answer 1

यह jQuery कोड किसी भी तत्व में तत्काल परिवर्तन पकड़ता है, और सभी ब्राउज़रों में काम करना चाहिए:

 $('.myElements').each(function() {
   var elem = $(this);

   // Save current value of element
   elem.data('oldVal', elem.val());

   // Look for changes in the value
   elem.bind("propertychange change click keyup input paste", function(event){
      // If value has changed...
      if (elem.data('oldVal') != elem.val()) {
       // Updated stored value
       elem.data('oldVal', elem.val());

       // Do action
       ....
     }
   });
 });

Comments

हर किसी के संदर्भ के लिए, inputHTML5 घटना है जो मेरा मानना ​​है कि सभी आधुनिक ब्राउज़रों ( एमडीएन संदर्भ ) को कवर करना चाहिए । keyupहालांकि, थोड़ी सी देरी के साथ (बाकी inputनीचे की ओर ट्रिगर किया गया है) बाकी को पकड़ना चाहिए । propertychangeएक मालिकाना एमएस घटना है, और मुझे यकीन नहीं है कि pasteवास्तव में आवश्यक है।

— जोइस

क्या मैं गलत हूं या जब टेक्स्ट को जावास्क्रिप्ट के माध्यम से बदल दिया गया है, तो यह हैंडल नहीं करता है जैसेdocument.getElementById('txtInput').value = 'some text';

— Mehmet Ataş

मेहमत, कोड का अर्थ जेएस के माध्यम से बदले गए मूल्यों को पकड़ना नहीं है।

— फतमान

@ मेहमेतआस आंशिक रूप से सही है। यहांinput घटना के संदर्भ में कहा गया है कि जब सामग्री जावास्क्रिप्ट के माध्यम से संशोधित की जाती है तो यह आग नहीं लगाती है। हालांकि, घटना करता जे एस के माध्यम से संशोधन पर आग (देखें यहाँ )। इसलिए यह कोड तब काम करेगा जब सामग्री को IE पर JS के माध्यम से संशोधित किया जाएगा, लेकिन अन्य ब्राउज़रों पर काम नहीं करेगा। onpropertychange

— विक्की चिजवानी

आप इनपुट पर एक कस्टम ईवेंट ट्रिगर कर सकते हैं जब प्रॉपर्टीचेंज, कीप आदि, और फिर कहीं भी इसका उपयोग कर सकते हैं।

— इवान इवकोविच

Answer 2

JQuery के लिए एक वास्तविक समय फैंसी समाधान = = 1.9

$("#input-id").on("change keyup paste", function(){
    dosomething();
})

अगर आप भी "क्लिक" इवेंट का पता लगाना चाहते हैं, तो:

$("#input-id").on("change keyup paste click", function(){
    dosomething();
})

यदि आप jQuery <= 1.4 का उपयोग कर रहे हैं, तो liveइसके बजाय का उपयोग करें on।

Comments

इसकी एक खामी है। यदि आप टैब कुंजी के साथ इनपुट फ़ील्ड छोड़ते हैं - तो यह कीप ईवेंट को फेंक देगा भले ही सामग्री संपादित नहीं की गई हो।

— पावका

जब डेटाइमपिकर # इनपुट-आईडी भरता है तो कैसे पता लगाएं? कोई भी घटना (परिवर्तन, पेस्ट) काम नहीं करती है।

— पाथ्र्स

यह भी खूब रही! मैंने इसे 1.8.1 jquery के साथ आज़माया और यह काम करता है। मेरे पास अभी भी कुछ लाइवक्वेरी () कोड हैं जिन्हें मुझे बदलना होगा इसलिए मैं 1.9.1 में भी अपग्रेड नहीं कर सकता। मुझे पता है कि यह पुराना है, लेकिन पूरी वेबसाइट है।

— Asle

FYI करें: ये ईवेंट एक रिक्त मान के साथ आग लगाएंगे यदि कीबोर्ड का उपयोग उस तिथि का चयन करने के लिए किया जाता है जो मान्य नहीं है। अर्थात। 30 फरवरी। stackoverflow.com/questions/48564568/…

— ओल्मस्तोव

Answer 3

दुर्भाग्य से, मुझे लगता है setIntervalकि पुरस्कार जीतता है:

<input type=text id=input_id />
<script>
setInterval(function() { ObserveInputValue($('#input_id').val()); }, 100);
</script>

यह कोड का केवल 1 लाइन पर सबसे साफ समाधान है। यह सबसे मजबूत भी है, क्योंकि आपको सभी अलग-अलग घटनाओं / तरीकों के बारे में चिंता करने की ज़रूरत नहीं है, inputजो मूल्य प्राप्त कर सकते हैं।

इस मामले में 'setInterval' के उपयोग की डाउनसाइड लागू नहीं होती है:

• 100ms विलंबता? कई अनुप्रयोगों के लिए, 100ms काफी तेज है।
• ब्राउज़र पर जोड़ा गया लोड? सामान्य तौर पर, आपके पृष्ठ पर बहुत सारे भारी-भरकम सेटइंटरवॉल जोड़ना खराब है। लेकिन इस विशेष मामले में, जोड़ा गया पृष्ठ लोड undetectable है।
• यह कई जानकारी के लिए पैमाने पर नहीं है? अधिकांश पृष्ठों में मुट्ठी भर से अधिक इनपुट नहीं होते हैं, जिन्हें आप एक ही सेटइंटरवल में सभी को सूँघ सकते हैं।

Comments

यह निनटेंडो 3DS ब्राउज़र (संस्करण / 1.7552.EU) का उपयोग करते समय एक रूप में एक इनपुट क्षेत्र में परिवर्तन का पता लगाने का एकमात्र तरीका प्रतीत होता है।

— जोहान

नोट: अधिभार को कम किया जा सकता है। यदि आप सेट शुरू करते हैं तो इनपुट फोकस और क्लियर हो जाता है जब इनपुट खो जाता है तो इन्टरवल करें

— Tebe

आप लगातार चलने वाला 100ms का अंतराल क्यों बनाएंगे, जहां लगातार चलने का कोई कारण नहीं है? लोगों को प्रेरित करता है। उन्हें इस्तेमाल करें।

— गेविन

@ गेविन, इस विशेष मामले में जेएस के पास घटनाओं की कमी है .. हमें उन घटनाओं का एक समूह खोजें जो पहचान सकती हैं, उपयोगकर्ता इनपुट, उपयोगकर्ता पेस्ट, उपयोगकर्ता कटौती, जावास्क्रिप्ट सम्मिलन, जावास्क्रिप्ट हटाने, रूपों की ऑटो-पूर्णता, छिपे हुए रूप, कोई प्रदर्शित नहीं रूपों।

— नरसिंह

@Gavin JS के पास एक परिवर्तित घटना नहीं है जो कि हर बार एक इनपुट बदली हुई हो। (सिर्फ एक document.getElementById (नाम) .value = Math.random ()) में से कोई भी इवेंट ट्रिगर समाधान कार्य देखने के लिए नहीं है।

— जोरी

Answer 4

इस oninputघटना के लिए बाध्य करने के लिए सबसे समझदार ब्राउज़रों में ठीक काम करने लगता है। IE9 भी इसका समर्थन करता है, लेकिन कार्यान्वयन छोटी गाड़ी है (पात्रों को हटाते समय घटना को निकाल नहीं दिया जाता है)।

JQuery के संस्करण 1.7+ के साथ onविधि इस तरह की घटना के लिए बाध्य करने के लिए उपयोगी है:

$(".inputElement").on("input", null, null, callbackFunction);

Comments

oninputईवेंट input[type=reset]या जावास्क्रिप्ट संपादन के साथ काम नहीं करता है जैसा कि आप इस परीक्षण में देख सकते हैं: codepen.io/yukulele/pen/xtEpb

— युकुलई

@ युकुले, कम से कम हम सभी संभावित उपयोगकर्ता कार्रवाई का पता लगाने की कोशिश करने की तुलना में अधिक आसानी से काम कर सकते हैं ।

— पचेरियर

Answer 5

2017 का उत्तर : IE8 की तुलना में हाल ही में इनपुट घटना कुछ और ही करती है।

$(el).on('input', callback)

Comments

क्षमा करें, लेकिन ... यह एचआरजे के 2012 के उत्तर से अलग कैसे है? वैसे भी, inputघटना जेएस परिवर्तनों का पता लगाने में विफल है।

— डेविड

Answer 6

दुर्भाग्य से ऐसी कोई घटना या घटनाओं का समूह नहीं है जो आपके मानदंडों से मेल खाता हो। कीप्स और कॉपी / पेस्ट दोनों को keyupइवेंट के साथ हैंडल किया जा सकता है । जेएस के माध्यम से परिवर्तन मुश्किल है। यदि आपके पास टेक्स्टबॉक्स सेट करने वाले कोड पर नियंत्रण है, तो आपका सबसे अच्छा शर्त यह है कि इसे संशोधित करके या तो अपने फ़ंक्शन को सीधे कॉल करें या टेक्स्टबॉक्स पर उपयोगकर्ता घटना को ट्रिगर करें:

// Compare the textbox's current and last value.  Report a change to the console.
function watchTextbox() {
  var txtInput = $('#txtInput');
  var lastValue = txtInput.data('lastValue');
  var currentValue = txtInput.val();
  if (lastValue != currentValue) {
    console.log('Value changed from ' + lastValue + ' to ' + currentValue);
    txtInput.data('lastValue', currentValue);
  }
}

// Record the initial value of the textbox.
$('#txtInput').data('lastValue', $('#txtInput').val());

// Bind to the keypress and user-defined set event.
$('#txtInput').bind('keypress set', null, watchTextbox);

// Example of JS code triggering the user event
$('#btnSetText').click(function (ev) {
  $('#txtInput').val('abc def').trigger('set');
});

यदि आपके पास उस कोड पर नियंत्रण नहीं है, तो आप setInterval()परिवर्तनों के लिए टेक्स्टबॉक्स को 'देख' सकते हैं :

// Check the textbox every 100 milliseconds.  This seems to be pretty responsive.
setInterval(watchTextbox, 100);

इस तरह की सक्रिय निगरानी अपडेट को 'तुरंत' पकड़ नहीं पाएगी, लेकिन यह काफी तेजी से लग रहा है कि कोई बोधगम्य अंतराल नहीं है। जैसा कि DrLouie ने टिप्पणियों में बताया है, यदि आपको बहुत सारे इनपुट देखने की आवश्यकता है, तो यह समाधान संभवत: ठीक नहीं है। आप setInterval()अधिक या कम बार जांचने के लिए 2 डी पैरामीटर को हमेशा समायोजित कर सकते हैं ।

Comments

FYI करें, वास्तव में उन घटनाओं का एक समूह है जिन्हें ओप्स मानदंड को ब्राउज़रों में अलग-अलग डिग्री में मिलाने के लिए जोड़ा जा सकता है (प्रथम प्रश्न टिप्पणी में लिंक देखें)। यह उत्तर उक्त घटनाओं में से किसी का भी उपयोग नहीं करता है, और विडंबना यह है कि शायद सभी ब्राउज़रों में भी काम करेगा, भले ही एक मामूली अंतराल के साथ;)

— वर्धमान ताजा

ओपी जावास्क्रिप्ट के माध्यम से टेक्स्टबॉक्स में परिवर्तन को पकड़ना चाहता है (उदाहरण के लिए myTextBox.value = 'foo';। कोई जावास्क्रिप्ट घटनाएँ उस स्थिति को नहीं संभालती हैं।

— एनाबेले

अगर किसी के पास टैब रखने के लिए 50 खेत हों तो क्या होगा?

— DoctorLouie

हां, मेरे पास मेरे मामले में केवल 1 फ़ील्ड है, लेकिन मैं यह नहीं देखता कि यह कई क्षेत्रों के लिए यथोचित काम क्यों नहीं करेगा। यह शायद सिर्फ 1 सेटटाइमआउट के लिए सबसे अधिक कुशल होगा जो सभी इनपुट की जांच करता है।

— डस्टिन बोसवेल

@ डगलस: कोई भी जावास्क्रिप्ट ईवेंट उस स्थिति को नहीं संभालता - सुधार: IE इसे संभाल सकता है input.onpropertychange, और FF2 +, ओपेरा 9.5, सफारी 3, और क्रोम 1 इसे संभाल सकता है input.__defineSetter__('value', ...)(जो, हालांकि यह डॉमोड नोड्स पर कार्यात्मक नहीं है, लेकिन मैं सत्यापित कर सकता हूं। यह काम करता हैं)। IE के कार्यान्वयन से एकमात्र विचलन IE है जो हैंडलर को न केवल प्रोग्रामेटिक सेटिंग पर बल्कि प्रमुख घटनाओं के दौरान भी फायर करता है।

— क्रीसेंट फ्रेश

Answer 7

यदि आप अन्य उत्तरों में से किसी को भी पसंद नहीं करते हैं तो यहां एक अलग समाधान है:

var field_selectors = ["#a", "#b"];
setInterval(function() { 
  $.each(field_selectors, function() { 
    var input = $(this);
    var old = input.attr("data-old-value");
    var current = input.val();
    if (old !== current) { 
      if (typeof old != 'undefined') { 
        ... your code ...
      }
      input.attr("data-old-value", current);
    }   
  }   
}, 500);

विचार करें कि आप संदर्भ मेनू पेस्ट को पकड़ने के लिए क्लिक और कीप पर भरोसा नहीं कर सकते।

Comments

इस जवाब ने मेरे लिए सबसे अच्छा काम किया। मुझे अपने चयनकर्ताओं के साथ कुछ समस्याएँ हो रही थीं, जब तक मैं इस्तेमाल नहीं किया गया: $("input[id^=Units_]").each(function() {

— रॉ

Answer 8

इस कोड को कहीं जोड़ें, यह चाल चलेगा।

var originalVal = $.fn.val;
$.fn.val = function(){
    var result =originalVal.apply(this,arguments);
    if(arguments.length>0)
        $(this).change(); // OR with custom event $(this).trigger('value-changed');
    return result;
};

इस समाधान को वेल में () परिवर्तन नहीं करता है () jQuery में

Answer 9

मैंने एक नमूना बनाया है। यह आपके लिए काम करेगा।

var typingTimer;
var doneTypingInterval = 10;
var finaldoneTypingInterval = 500;

var oldData = $("p.content").html();
$('#tyingBox').keydown(function () {
    clearTimeout(typingTimer);
    if ($('#tyingBox').val) {
        typingTimer = setTimeout(function () {
            $("p.content").html('Typing...');
        }, doneTypingInterval);
    }
});

$('#tyingBox').keyup(function () {
    clearTimeout(typingTimer);
    typingTimer = setTimeout(function () {
        $("p.content").html(oldData);
    }, finaldoneTypingInterval);
});


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<textarea id="tyingBox" tabindex="1" placeholder="Enter Message"></textarea>
<p class="content">Text will be replace here and after Stop typing it will get back</p>

http://jsfiddle.net/utbh575s/

Answer 10

हमें वास्तव में javaScript परिवर्तनों का पता लगाने के लिए लूप सेटअप करने की आवश्यकता नहीं है। जिस तत्व का हम पता लगाना चाहते हैं, उसके लिए हम पहले से ही कई ईवेंट श्रोताओं को स्थापित कर रहे हैं। किसी भी हानिकारक घटना को ट्रिगर करने से काम बन जाएगा।

$("input[name='test-element']").on("propertychange change click keyup input paste blur", function(){
console.log("yeh thats worked!");
});

$("input[name='test-element']").val("test").trigger("blur");

और यह केवल तभी उपलब्ध है जब आपके पास अपनी परियोजना पर जावास्क्रिप्ट परिवर्तन पर पूर्ण नियंत्रण है।

Answer 11

ठीक है, सबसे अच्छा तरीका है कि आप उन तीन आधारों को कवर करें जिन्हें आपने स्वयं सूचीबद्ध किया है। एक सरल: onblur,: onkeyup, आदि जो आप चाहते हैं उसके लिए काम नहीं करेंगे, इसलिए बस उन्हें गठबंधन करें।

KeyUp को पहले दो को कवर करना चाहिए, और यदि जावास्क्रिप्ट इनपुट बॉक्स को संशोधित कर रहा है, तो मुझे यकीन है कि यह आपकी खुद की जावास्क्रिप्ट है, इसलिए इसे संशोधित करने वाले फ़ंक्शन में केवल कॉलबैक जोड़ें।

Comments

साधारण समाधान के लिए +1, हालांकि यह संभव है कि ओपी पाठ बॉक्स में परिवर्तन करने वाले कोड को संशोधित नहीं करना / कर सकता है।

— एनाबेले

सभी संभावित घटनाओं की गणना मुझे मजबूत नहीं लगती है। क्या उपयोगकर्ता के डिलीट (यानी रिपीट-की) को दबाए रखने पर कीप काम करता है? ऑटो-पूर्ण (या टूलबार जो ऑटो-फिल मान) के बारे में क्या कहते हैं? या विशेष इनपुट स्रोत हैं जो कि कीप को फायर नहीं करते हैं? मुझे चिंता होगी कि ऐसा कुछ होगा जो आपको याद होगा।

— डस्टिन बोसवेल

Answer 12

यहाँ एक कामकाजी उदाहरण है कि मैं एक स्वत: पूर्ण भिन्नता को लागू करने के लिए उपयोग कर रहा हूं जो एक jqueryui चयनकर्ता (सूची) को पॉप्युलेट करता है, लेकिन मैं नहीं चाहता कि यह बिल्कुल jqueryui स्वतः पूर्ण की तरह कार्य करे जो ड्रॉप-डाउन मेनू करता है।

$("#tagFilter").on("change keyup paste", function() {
     var filterText = $("#tagFilter").val();
    $("#tags").empty();
    $.getJSON("http://localhost/cgi-bin/tags.php?term=" + filterText,
        function(data) {
            var i;
            for (i = 0; i < data.length; i++) {
                var tag = data[i].value;
                $("#tags").append("<li class=\"tag\">" + tag + "</li>");
            }
        }); 
});

Answer 13

कोई नहीं! (इसके किफ़ायत इन दिनों वैसे भी अप्रचलित हैं)

संपादित करें: मैंने HTML ईवेंट्स को हटा दिया है। HTML ईवेंट का उपयोग न करें ... इसके बजाय जावास्क्रिप्ट ईवेंट श्रोताओं का उपयोग करें।

document.querySelector("#testInput").addEventListener("input", test);

function test(e) {
 var a = document.getElementById('output');
 var b = /^[ -~]+$/;
 if (e.target.value == '' || b.test(e.target.value)) {
  a.innerText = "Text is Ascii?.. Yes";
 } else if (!b.test(e.target.value)) {
  a.innerText = "Text is Ascii?.. No";
 }
}

Try pressing Alt+NumPad2+NumPad3 in the input, it will instantly detect a change, whether you Paste, Type, or any other means, rather than waiting for you to unselect the textbox for changes to detect.

<input id="testInput">
<br>
<a id="output">Text is Ascii?.. Yes</a>

Answer 14

क्या आप केवल इसके <span contenteditable="true" spellcheck="false">स्थान पर तत्व का उपयोग नहीं कर सकते <input type="text">?

<span>( contenteditable="true" spellcheck="false"विशेषताओं के साथ ) <input>मुख्य रूप से अलग है क्योंकि:

• यह स्टाइल की तरह नहीं है <input>।
• इसके पास कोई valueसंपत्ति नहीं है , लेकिन पाठ को innerTextइसके आंतरिक भाग के रूप में प्रस्तुत किया गया है।
• यह बहुस्तरीय है जबकि <input>आप विशेषता निर्धारित नहीं करते हैं multiline="true"।

निश्चित रूप से, आप इसे सीएसएस में स्टाइल कर सकते हैं, जबकि innerTextआप इसे एक घटना के लिए प्राप्त कर सकते हैं।

यहाँ एक बेला है ।

दुर्भाग्य से कुछ ऐसा है जो वास्तव में IE और एज में काम नहीं करता है, जिसे मैं खोजने में असमर्थ हूं।

Comments

मुझे लगता है कि उस पद्धति का उपयोग करने के आसपास पहुंच संबंधी चिंताएं हैं।

— डैनियल टोनन

Answer 15

हालाँकि यह प्रश्न 10 साल पहले पोस्ट किया गया था, लेकिन मेरा मानना ​​है कि अभी भी इसमें कुछ सुधार की आवश्यकता है। तो यहाँ मेरा समाधान है।

$(document).on('propertychange change click keyup input paste', 'selector', function (e) {
    // Do something here
});

इस समाधान के साथ एक ही समस्या है, यह ट्रिगर नहीं होगा यदि मान जावास्क्रिप्ट से बदलता है जैसे $('selector').val('some value')। जब आप जावास्क्रिप्ट से मान बदलते हैं तो आप अपने चयनकर्ता को किसी भी घटना को आग लगा सकते हैं।

$(selector).val('some value');
// fire event
$(selector).trigger('change');

Answer 16

आप इस उदाहरण को देख सकते हैं और चुन सकते हैं कि कौन सी घटनाएं हैं जो आपकी रुचि रखते हैं:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<title>evetns</title>
</head>
<body>
<form>
    <input class="controlevents" id="i1" type="text" /><br />
    <input class="controlevents" id="i2" type="text" /><br />
    <input class="controlevents" id="i3" type="text" /><br />
    <input class="controlevents" id="i4" type="text" /><br />
    <input class="controlevents" id="i5" type="text" /><br />
</form>
<div id="datatext"></div>
</body>
</html>
<script>
$(function(){

function testingevent(ev){
    if (ev.currentTarget.tagName=="INPUT")
        $("#datatext").append("<div>id : " + ev.currentTarget.id + ", tag: " + ev.currentTarget.tagName + ", type: "+ ev.type +"</div>");
}   

    var eventlist = ["resizeend","rowenter","dragleave","beforepaste","dragover","beforecopy","page","beforeactivate","beforeeditfocus","controlselect","blur",
                    "beforedeactivate","keydown","dragstart","scroll","propertychange","dragenter","rowsinserted","mouseup","contextmenu","beforeupdate",
                    "readystatechange","mouseenter","resize","copy","selectstart","move","dragend","rowexit","activate","focus","focusin","mouseover","cut",
                    "mousemove","focusout","filterchange","drop","blclick","rowsdelete","keypress","losecapture","deactivate","datasetchanged","dataavailable",
                    "afterupdate","mousewheel","keyup","movestart","mouseout","moveend","cellchange","layoutcomplete","help","errorupdate","mousedown","paste",
                    "mouseleave","click","drag","resizestart","datasetcomplete","beforecut","change","error","abort","load","select"];

    var inputs = $(".controlevents");

    $.each(eventlist, function(i, el){
        inputs.bind(el, testingevent);
    });

});
</script>

Comments

मुझे लगता है कि आप एक घटना प्रकार भूल गए :)

— डस्टिन बोसवेल

Answer 17

मुझे यहां पार्टी में देर हो सकती है लेकिन क्या आप सिर्फ jc प्रदान करने वाली .change () घटना का उपयोग नहीं कर सकते।

आपको कुछ ऐसा करने में सक्षम होना चाहिए ...

$(#CONTROLID).change(function(){
    do your stuff here ...
});

आप इसे हमेशा नियंत्रण की सूची में बांध सकते हैं जैसे कि ...

var flds = $("input, textarea", window.document);

flds.live('change keyup', function() {
    do your code here ...
});

लाइव बाइंडर यह सुनिश्चित करता है कि पृष्ठ पर और भविष्य में मौजूद सभी तत्वों को संभाला जाए।

Comments

परिवर्तन ईवेंट केवल फ़ोकस खो जाने के बाद फायर करता है, इसलिए यह आग नहीं लगाता है जब उपयोगकर्ता बॉक्स में टाइप कर रहा होता है, उसके बाद ही वे काम करते हैं और कुछ और करते हैं।

— एली सैंड

यहां कई अन्य उत्तरों की तरह, यह तब काम नहीं करेगा जब तत्व का मूल्य जावास्क्रिप्ट से संशोधित किया गया हो। मुझे नहीं पता कि यह ओपी द्वारा पूछे गए किसी अन्य संशोधन के मामलों को याद करता है या नहीं।

— मार्क एमी

Answer 18

यह ऐसा करने का सबसे तेज़ और साफ तरीका है:

मैं Jquery -> का उपयोग कर रहा हूं

$('selector').on('change', function () {
    console.log(this.id+": "+ this.value);
});

यह मेरे लिए बहुत अच्छा काम कर रहा है।

Comments

यह पहले ही सुझाया जा चुका है। यह केवल सरल मामलों को संबोधित करता है, जब उपयोगकर्ता पाठ टाइप करता है।

— क्रिस्टोफ