इनपुट तत्व पर जावास्क्रिप्ट परिवर्तन घटना केवल फोकस खोने पर आग लगती है

Question

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

<input type="text" id="name" onchange="checkLength(this.value)" />

---- onchange नाम की सामग्री को बदलने पर आग नहीं है, लेकिन केवल सक्रिय होता है नाम फोकस के बाहर चला जाता है।

क्या इस घटना को सामग्री परिवर्तन पर काम करने के लिए मैं कुछ कर सकता हूं? या किसी अन्य घटना के लिए मैं इसका उपयोग कर सकता हूं? मुझे ऑनकीप फ़ंक्शन का उपयोग करके एक वर्कअराउंड मिला, लेकिन जब हम ब्राउज़र के ऑटो पूर्ण से कुछ सामग्री चुनते हैं तो यह आग नहीं आता है।

मुझे ऐसा कुछ चाहिए जो क्षेत्र की सामग्री को कीबोर्ड या माउस द्वारा बदलता है ... कोई विचार?

Answer 1

(function() { 
    var oldVal; 

    $('#name').on('change textInput input', function() { 
     var val = this.value; 
     if (val !== oldVal) { 
      oldVal = val; 
      checkLength(val); 
     } 
    }); 
}()); 

यह change, कीस्ट्रोक्स, paste, textInput, पकड़ेगा input (उपलब्ध होने पर)। और आवश्यक से अधिक आग नहीं।

http://jsfiddle.net/katspaugh/xqeDj/

---

संदर्भ:

textInput - एक W3C डोम स्तर 3 घटना प्रकार। http://www.w3.org/TR/DOM-Level-3-Events/#events-textevents

जब एक या अधिक वर्ण दर्ज किया गया है उपयोगकर्ता एजेंट इस घटना प्रेषण चाहिए। ये वर्ण विभिन्न प्रकार के स्रोतों से उत्पन्न हो सकते हैं, उदाहरण के लिए, इनपुट विधि संपादक की प्रसंस्करण से, या वॉइस कमांड के परिणामस्वरूप, कीबोर्ड डिवाइस पर जारी की गई कुंजी या से उत्पन्न वर्णों के परिणामस्वरूप। जहां "पेस्ट" ऑपरेशन वर्णों का एक सरल अनुक्रम उत्पन्न करता है, यानी, किसी भी संरचना या शैली की जानकारी के बिना एक पाठ मार्ग उत्पन्न करता है, यह ईवेंट प्रकार भी उत्पन्न होना चाहिए।

input - एक HTML5 घटना प्रकार।

नियंत्रण पर निकाल दिया उपयोगकर्ता मूल्य

फायरफॉक्स, क्रोम, IE9 और अन्य आधुनिक ब्राउज़रों इसे समर्थन बदल जाता है जब।

यह घटना संशोधन के तुरंत बाद होती है, जो बदले की घटना के विपरीत होती है, जो तब होता है जब तत्व फोकस खो देता है।

Answer 2

Do it the jQuery way:

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


$('#name').keyup(function() { 
    alert('Content length has changed to: '+$(this).val().length); 
}); 

Answer 3

आप

<input id="name" onkeyup="checkLength(this.value)" /> 

Answer 4

onkeyup उपयोग कर सकते हैं अगर आप हर संभावना को पकड़ने के लिए चाहते हैं तो आप onkeyup और onclick (या onmouseup) के संयोजन का उपयोग करना होगा।

<input id="name" onkeyup="checkLength(this.value)" onmouseup="checkLength(this.value)" /> 

Answer 5

यहां एक और समाधान है जो मैं एक ही समस्या के लिए विकसित करता हूं। हालांकि मैं कई इनपुट बॉक्स का उपयोग करता हूं, इसलिए मैं पुराने मान को तत्वों के उपयोगकर्ता द्वारा परिभाषित विशेषता के रूप में रखता हूं: "डेटा-वैल्यू"। JQuery का उपयोग करना इसे प्रबंधित करना इतना आसान है।

 $(document).delegate('.filterBox', 'keyup', { self: this }, function (e) { 
      var self = e.data.self; 

      if (e.keyCode == 13) { 
       e.preventDefault(); 
       $(this).attr('data-value', $(this).val()); 
       self.filterBy(this, true) 
      } 
      else if (e.keyCode == 27) { 
       $(this).val(''); 
       $(this).attr('data-value', ''); 
       self.filterBy(this, true) 
      } 
      else { 
       if ($(this).attr('data-value') != $(this).val()) { 
        $(this).attr('data-value', $(this).val()); 
        self.filterBy(this); 
       } 
      } 
     }); 

यहाँ है, मैं प्रयोग किया जाता है 5-6 इनपुट बॉक्स वर्ग 'filterBox', है मैं filterBy विधि रन बनाने ही अगर डेटा-मूल्य का अपना मूल्य से अलग है।

Answer 6

कैट्सफ़ोफ़ के जवाब के विस्तार के रूप में, यहां एक सीएसएस वर्ग का उपयोग करके कई तत्वों के लिए ऐसा करने का एक तरीका है।

$('.myclass').each(function(){ 
     $(this).attr('oldval',$(this).val()); 
    }); 

    $('.myclass').on('change keypress paste focus textInput input',function(){ 
     var val = $(this).val(); 
     if(val != $(this).attr('oldval')){ 
      $(this).attr('oldval',val); 
      checkLength($(this).val()); 
     } 
    });