jQuery के टेक्स्टबॉक्स परिवर्तन की घटना तब तक आग नहीं लगाती जब तक टेक्स्टबॉक्स ध्यान केंद्रित नहीं करता?

Question

मैंने पाया कि जब तक मैं टेक्स्टबॉक्स के बाहर क्लिक नहीं करता, तब तक टेक्स्ट बॉक्स पर jQuery का बदलाव नहीं होता।

HTML:

<input type="text" id="textbox" />

जे एस:

$("#textbox").change(function() {alert("Change detected!");});

JSFiddle पर डेमो देखें

मेरे आवेदन को टेक्स्ट बॉक्स में हर वर्ण परिवर्तन पर घटना को हटाने की आवश्यकता है। मैं भी बजाय keyup का उपयोग करने की कोशिश की ...

$("#textbox").keyup(function() {alert("Keyup detected!");});

... लेकिन यह एक ज्ञात तथ्य है कि की-अप इवेंट को राइट-क्लिक-एंड-पेस्ट पर निकाल नहीं दिया जाता है।

कोई वर्कअराउंड? क्या दोनों श्रोताओं को कोई समस्या होने वाली है?

Comments

^ ^ यह। आपके पास जितने चाहें उतने इवेंट हैंडलर हो सकते हैं।

— मोनिका सेलियो

Answer 1

दोनों घटनाओं के लिए बाध्य यह करने के लिए विशिष्ट तरीका है। आप पेस्ट इवेंट में भी बाँध सकते हैं।

आप इस तरह कई घटनाओं के लिए बाध्य कर सकते हैं:

$("#textbox").on('change keyup paste', function() {
    console.log('I am pretty sure the text box changed');
});

यदि आप इसके बारे में पांडित्यपूर्ण होना चाहते हैं, तो आपको पाठ को घसीटने के लिए पूरा करने के लिए माउसअप से बाँधना चाहिए, और lastValueयह सुनिश्चित करने के लिए एक चर जोड़ना होगा कि पाठ वास्तव में बदल गया है:

var lastValue = '';
$("#textbox").on('change keyup paste mouseup', function() {
    if ($(this).val() != lastValue) {
        lastValue = $(this).val();
        console.log('The text box really changed this time');
    }
});

और यदि आप super duperपांडित्यपूर्ण होना चाहते हैं तो आपको ऑटो फिल, प्लगइन्स आदि को पूरा करने के लिए एक अंतराल टाइमर का उपयोग करना चाहिए:

var lastValue = '';
setInterval(function() {
    if ($("#textbox").val() != lastValue) {
        lastValue = $("#textbox").val();
        console.log('I am definitely sure the text box realy realy changed this time');
    }
}, 500);

Comments

अंत में किसी ने सवाल पढ़ा और पूरी बात का जवाब दिया!

— मोनिका सेलियो

.on('change keyup paste', function() {...}वास्तव में कई बार आग! यदि मैंने एक वर्ण टाइप किया, और फिर बाहर क्लिक किया, तो 'परिवर्तन' और 'कीअप' ईवेंट दोनों को निकाल दिया गया है, जिसके कारण फ़ंक्शन कई बार निष्पादित हो रहा है! यदि मैंने राइट-क्लिक-पेस्ट किया और फिर बाहर क्लिक किया, तो 'चेंज' और 'पेस्ट' दोनों निकाल दिए जाते हैं। ओह! पेस्ट करने के लिए Ctrl + V का उपयोग करने पर और फिर तीन बार क्लिक करने से यह बाहर निकलता है !!

— SNag

@SNag हाँ, इसी तरह आपको एक lastValueचर का उपयोग करके एक चेक जोड़ना चाहिए ताकि यह सुनिश्चित हो सके कि यह वास्तव में बदल गया है।

— पेटा

+1। हालांकि, यहां भी 'परिवर्तन' के लिए बाध्यकारी है? यह मेरे लिए स्पष्ट नहीं है कि ऐसा कौन सा मामला होगा जो पहले से ही इसे (परिवर्तन) निकाल दिया गया था।

— मडब्रेक्स

पाठ को वास्तव में चिपकाने से पहले पेस्ट घटना को निकाल दिया जाता है

— डेवलेपर

Answer 2

आधुनिक ब्राउज़रों पर, आप उपयोग कर सकते हैं घटना :input

डेमो

$("#textbox").on('input',function() {alert("Change detected!");});

Comments

अच्छा - मुझे इसकी जानकारी नहीं थी। क्या यह एचटीएमएल 5 है?

— मोनिका सेलियो

मुझे यह उत्तर स्वीकार करना अच्छा लगा, लेकिन जैसा आपने कहा, यह आधुनिक ब्राउज़रों के लिए एक समाधान है। मेरा वेब एप्लिकेशन अभी भी IE8 का उपयोग करने वाले उपयोगकर्ताओं पर लक्षित है, और यह IE8 पर काम नहीं करता है। :( मैं क्या कह सकता हूँ: :(

— SNag

उदाहरण के लिए सभी पाठ और हिट डिलीट की को चुनें तो आग नहीं लगती

— jjxtra

Answer 3

$(this).bind('input propertychange', function() {
        //your code here
    });

यह टाइपिंग, पेस्ट, राइट क्लिक माउस पेस्ट आदि के लिए काम करता है।

Comments

यह सबसे अच्छा समाधान की तरह लगता है क्योंकि यह कई घटनाओं को आग नहीं देता है यदि आप एक संख्यात्मक क्षेत्र पर हिट तीर की तरह कुछ करते हैं।

— जस्टिन

सरल और कुशल समाधान

— अब्दुलहमीद

Answer 4

if you write anything in your textbox, the event gets fired.
code as follows :

HTML:

<input type="text" id="textbox" />

जे एस:

<script type="text/javascript">
  $(function () {
      $("#textbox").bind('input', function() {
      alert("letter entered");
      });
   });
</script>

Answer 5

इसे इस्तेमाल करे:

$("#textbox").bind('paste',function() {alert("Change detected!");});

JSFiddle पर डेमो देखें ।

Comments

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

— धवल मार्थक

और इसका उपयोग करने के लिए क्या मिला है bind()?

— मोनिका सेलियो

वह कहा कि वह KeyUp घटना जब राइट क्लिक + उस पर पेस्ट इसलिए निकाल दिया जाता है, keyupऔर change()इसलिए आईडी वह तो घटना निष्पादित करने के लिए चाहता है अपने स्वयं के विशिष्ट व्यवहार है pasteविकल्प हो सकता है

— धवल Marthak

बेशक, लेकिन यह अभी भी जवाब नहीं है कि bindइसके बजाय का उपयोग क्यों on।

— मोनिका सेलियो

Answer 6

नीचे दिए गए कोड का प्रयास करें:

$("#textbox").on('change keypress paste', function() {
  console.log("Handler for .keypress() called.");
});

Comments

माउस के साथ चिपकाने को कैसे पकड़ता है, जैसा कि प्रश्न में वर्णित है?

— मोनिका सेलियो

event to be fired on every character change in the textbox

— कीपर

यदि आप सभी प्रश्न पढ़ेंगे तो आप देखेंगे कि उन्होंने भी कहा,"...but it's a known fact that the keyup event isn't fired on right-click-and-paste."

— मोनिका सेलियो

Answer 7

आपकी टिप्पणियों को पढ़कर मुझे एक गंदी नियत मिली। यह एक सही तरीका नहीं है, मुझे पता है, लेकिन एक काम हो सकता है।

$(function() {
    $( "#inputFieldId" ).autocomplete({
        source: function( event, ui ) {
            alert("do your functions here");
            return false;
        }
    });
});