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




html (11)

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

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

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

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

उदाहरण का उपयोग केस: ट्विटर साइनअप पेज पर, उपयोगकर्ता नाम फ़ील्ड का मान यूआरएल " http://twitter/ उपयोगकर्ता नाम " में दिखाया गया है।


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

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

यदि आप "क्लिक" ईवेंट का पता लगाना चाहते हैं, तो बस:

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

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


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

<!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>


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

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


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

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

इस तरह की सक्रिय निगरानी अद्यतन 'तुरंत' नहीं पकड़ पाएगी, लेकिन ऐसा लगता है कि कोई समझदार अंतराल नहीं है। जैसा कि डॉ। लुई ने टिप्पणियों में बताया, यदि आपको बहुत सारे इनपुट देखने की ज़रूरत है तो यह समाधान शायद अच्छी तरह से स्केल नहीं करेगा। अधिक से कम बार जांचने के लिए आप हमेशा दूसरे पैरामीटर को setInterval() समायोजित कर सकते हैं।


मैं यहां पार्टी के लिए देर हो सकता हूं लेकिन क्या आप सिर्फ .change () ईवेंट का उपयोग नहीं कर सकते जो jQuery प्रदान करता है।

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

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

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

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

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

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


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

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

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


यह 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
       ....
     }
   });
 });

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

$("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");

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


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

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

  • यह एक <input> तरह स्टाइल नहीं है।
  • इसमें कोई value प्रॉपर्टी नहीं है, लेकिन टेक्स्ट को आंतरिक टेक्स्ट के रूप में प्रस्तुत किया जाता है और इसके आंतरिक शरीर का हिस्सा बनता है।
  • यह multiline है जबकि <input> यह नहीं है कि आप गुण multiline="true" सेट करते हैं।

उपस्थिति को पूरा करने के लिए, निश्चित रूप से, इसे सीएसएस में स्टाइल कर सकते हैं, जबकि मूल्य को innerText रूप में लिखना, आप इसके लिए एक ईवेंट प्राप्त कर सकते हैं:

यहाँ एक fiddle

दुर्भाग्यवश ऐसा कुछ है जो वास्तव में आईई और एज में काम नहीं करता है, जिसे मैं नहीं ढूंढ पा रहा हूं।


2017 उत्तर : आईई 8 की तुलना में इनपुट इवेंट बिल्कुल हाल ही में कुछ भी करता है।

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




html