jQuery KeyUp के लिए बाध्य केवल, ध्यान केंद्रित नहीं

Question

यह एक साधारण बात की तरह लगता है, लेकिन गूगल मेरे लिए कुछ भी चालू नहीं किया गया:

कैसे मैं केवल एक पाठ/मूल्य परिवर्तन घटना के लिए बाध्य कर सकते हैं, एक इनपुट प्राप्त कर रहा फोकस को छोड़कर ? यानी, निम्नलिखित दिया:

$(function(){ 
    $('input#target').on('keyup', function(){ 
    alert('Typed something in the input.'); 
    }); 
}); 

... चेतावनी ट्रिगर हो जाएगा और एक तत्व से बाहर उपयोगकर्ता टैब, चाहे वे वास्तव में इनपुट पाठ या नहीं। ईवेंट को ट्रिगर किए बिना उपयोगकर्ता को कीबोर्ड के माध्यम से नेविगेट करने की अनुमति कैसे दे सकती है जब तक वे टेक्स्ट फ़ील्ड में टेक्स्ट इनपुट/परिवर्तित नहीं करते?

नोट: मैं एक स्क्रिप्ट का एक सरलीकृत संस्करण दिखा रहा हूँ, change घटना का उपयोग नहीं करने के लिए कारण यह है कि मेरा असली कोड में मैं उपयोगकर्ता एक के लिए टाइपिंग बंद होने के बाद तो यह है कि घटना होता है एक देरी टाइमर है दूसरा, उन्हें घटना को ट्रिगर करने के लिए फोकस बदलने के बिना।

Answer 1

स्टोर मूल्य, और यह बहुत की तरह, बदल गया है यदि कोई महत्वपूर्ण घटना की जांच पर:

$(function(){ 
    $('input#target').on('keyup', function(){ 
     if ($(this).data('val')!=this.value) { 
      alert('Typed something in the input.'); 
     } 
     $(this).data('val', this.value); 
    }); 
});​ 

FIDDLE

Answer 2

बस .change ईवेंट का उपयोग करें।

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

आप कुंजी कोड की एक श्वेत सूची है कि अनदेखी कर रहे हैं के साथ इस लागू कर सकते हैं, लेकिन यह हो सकता है बदसूरत: दबाने डेल परिणाम मूल्य में बदला जा रहा है, जब तक कर्सर के इनपुट के अंत में स्थिति में है जो इसे मामले में ऐसा नहीं करता है, जब तक कि इनपुट में कोई चयनित श्रेणी न हो, तब तक यह किस मामले में होता है।

एक और तरीका जिसे मैं व्यक्तिगत रूप से अधिक शुद्ध समझता हूं यदि "शुद्ध" नहीं है, तो अपने हैंडलर को तत्व के पुराने मूल्य को याद रखने के लिए प्रोग्राम करना है और केवल तभी बदला जाता है जब यह बदल गया है।

$(function() { 
    // for each input element we are interested in 
    $("input").each(function() { 
     // set a property on the element to remember the old value, 
     // which is initially unknown 
     this.oldValue = null; 
    }).focus(function() { 
     // this condition is true just once, at the time we 
     // initialize oldValue to start tracking changes 
     if (this.oldValue === null) { 
      this.oldValue = this.value; 
     } 
    }).keyup(function() { 
     // if no change, nothing to do 
     if (this.oldValue == this.value) { 
      return; 
     } 

     // update the cached old value and do your stuff 
     this.oldValue = this.value; 
     alert("value changed on " + this.className); 
    }); 
});​ 

आप गुण DOM तत्व पर सीधे स्थापित करने के लिए नहीं करना चाहते हैं तो आप this.oldValue के लिए $(this).data("oldValue") स्थानापन्न सकता है जब भी यह प्रतीत होता है (वास्तव में, वहाँ इसके साथ कुछ भी गलत नहीं है)। यह तकनीकी रूप से कोड धीमा करने की कमी होगी, लेकिन मुझे विश्वास नहीं है कि कोई भी नोटिस करेगा।

See it in action।

Answer 3

यह बात करेंगे, जो एक कस्टम विशेषता सेट और उस के खिलाफ जांच:

$('input').focus(function(){ 
    $(this).attr('originalvalue',$(this).val()); 
}); 

$('input').on('keyup',function(){ 
    if($(this).val()===$(this).attr('originalvalue')) return; 
    alert('he must\'ve typed something.'); 
}); 

कई बार फायरिंग की घटनाओं से सावधान रहें।

Answer 4

यहाँ एक और संस्करण है, तो इनपुट फ़ील्ड रिक्त है कि स्पष्ट रूप से परीक्षण है।

यदि इनपुट खाली है तो कार्रवाई नहीं की जाती है।

$(function(){ 
    $(selector).on('keyup', function(){ 
     if ($(this).val()!='') { 
      alert('char was entered'); 
     } 
    }) 
});