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

Question 1

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

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

---- ऑनकॉन्ग नाम की सामग्री को बदलने पर आग नहीं लगाता है, लेकिन केवल तभी ध्यान केंद्रित करता है जब नाम ध्यान से बाहर हो जाता है।

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

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

Question 2

(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 DOM लेवल 3 ईवेंट प्रकार। http://www.w3.org/TR/DOM-Level-3-Events/#events-textevents

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

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

जब उपयोगकर्ता मान बदलता है तो नियंत्रण में फायर किया गया

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

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

Question 3

कटस्पा के उत्तर के लिए एक उद्धरण के रूप में, यहाँ एक ऐसा तरीका है जो एक css वर्ग का उपयोग करके कई तत्वों के लिए करता है।

   $('.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());
        }
    });

Question 4

इसे खोजने में मुझे 30 मिनट का समय लगा, लेकिन यह जून 2019 में काम कर रहा है।

<input type="text" id="myInput" oninput="myFunction()">

और यदि आप js में प्रोग्राम श्रोता को एक कार्यक्रम जोड़ना चाहते हैं

inputElement.addEventListener("input", event => {})

Question 5

यह jQuery तरीका है:

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


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

Question 6

आप onkeyup का उपयोग कर सकते हैं

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

Question 7

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

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

Question 8

यहां एक और समाधान है जो मैं उसी समस्या के लिए विकसित करता हूं। हालांकि मैं कई इनपुट बॉक्स का उपयोग करता हूं इसलिए मैं पुराने मान को तत्वों के उपयोगकर्ता-परिभाषित विशेषता के रूप में रखता हूं: "डेटा-मूल्य"। 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 इनपुट बॉक्स का उपयोग किया है जिसमें 'फिल्टरबॉक्स' वर्ग है, मैं फ़िल्टरबाय विधि को केवल तभी चलाता हूँ जब डेटा-वैल्यू अपने स्वयं के मूल्य से भिन्न हो।