jQuery कुंजी दबाने

Question

मैं निम्नलिखित कार्य हो के बाद इनपुट मूल्य मिलता है:,

$(document).ready(function() { 
    $("#dSuggest").keypress(function() { 
     var dInput = $('input:text[name=dSuggest]').val(); 
     console.log(dInput); 
     $(".dDimension:contains('" + dInput + "')").css("display","block"); 
    }); 
}); 

किसी कारण से पहली कुंजी दबाने के लिए, मैं कंसोल लॉग में कोई रिक्त स्ट्रिंग हो रही है।

Answer 1

इसका कारण यह है keypress घटनाओं (, इसलिए पहले keypress घटना से पहले पहले वर्ण जोड़ा जाता है निकाल दिया जाता है, जबकि अभी भी value खाली है) नए चरित्र तत्व की value में जोड़ा जाता है से पहले निकाल दिया जाता है। आपको का उपयोग करना चाहिए, जिसे के बाद निकाल दिया गया है।

ध्यान दें कि, यदि आपका तत्व #dSuggestinput:text[name=dSuggest] रूप में ही है आप काफी इस कोड को आसान बनाने में कर सकते हैं (और अगर ऐसा नहीं है, एक ऐसा नाम है जो एक और तत्व की id रूप में ही है साथ एक तत्व होने एक अच्छा नहीं है विचार)।

$('#dSuggest').keypress(function() { 
    var dInput = this.value; 
    console.log(dInput); 
    $(".dDimension:contains('" + dInput + "')").css("display","block"); 
}); 

Answer 2

कुंजीपटल के बजाय .keyup का उपयोग करें।

वर्तमान इनपुट मान तक पहुंचने के लिए $(this).val() या केवल this.value का उपयोग करें।

DEMO यहाँ

जानकारी के बारे में .keypress, jQuery डॉक्स से

कुंजी दबाने घटना एक तत्व के लिए भेजा जाता है जब ब्राउज़र पंजीकृत करता कीबोर्ड इनपुट। यह कुंजीहरण घटना के समान है, कुंजी दोहराव के मामले को छोड़कर। यदि उपयोगकर्ता कुंजी दबाता है और रखता है, तो एक कीडाउन ईवेंट एक बार ट्रिगर होता है, लेकिन अलग-अलग कुंजीपटल ईवेंट प्रत्येक डाले गए वर्ण के लिए ट्रिगर किए जाते हैं। इसके अलावा, संशोधक कुंजी (जैसे शिफ्ट) ट्रिगर कीडाउन ईवेंट ट्रिगर करें लेकिन ईवेंट को दबाएं नहीं।

Answer 3

इनपुट को अपडेट करने की अनुमति देने के लिए आपको निष्पादन थ्रेड को बाधित करना होगा।

$(document).ready(function(event) { 
     $("#dSuggest").keypress(function() { 
      //Interrupt the execution thread to allow input to update 
       setTimeout(function() { 
        var dInput = $('input:text[name=dSuggest]').val(); 
        console.log(dInput); 
        $(".dDimension:contains('" + dInput + "')").css("display","block"); 
       }, 0); 
     }); 
    }); 

Answer 4

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

आपको इसके बजाय "input" ईवेंट का उपयोग करना चाहिए, और .on विधि के साथ पंजीकरण करना चाहिए। यह तेज़ है - keyup के अंतराल के बिना और आपके द्वारा वर्णित अनुपलब्ध नवीनतम कीप्रेस समस्या हल करता है।

$('#dSuggest').on("input", function() { 
    var dInput = this.value; 
    console.log(dInput); 
    $(".dDimension:contains('" + dInput + "')").css("display","block"); 
}); 

Demo here

Answer 5

यह वह जगह है से पहले नए चरित्र जोड़ा जाता है क्योंकि Keypress घटना निकाल दिया जाता है। इसके बजाए 'कीप' घटना का प्रयोग करें, जो आपकी स्थिति में पूरी तरह से काम करेगा।

$(document).ready(function() { 
    $("#dSuggest").keyup(function() { 
     var dInput = $('input:text[name=dSuggest]').val(); 
     console.log(dInput); 
     $(".dDimension:contains('" + dInput + "')").css("display","block"); 
    }); 
}); 

मैं इस में जोड़ने के लिए, यदि आप कई बक्सें है चाहते हैं और आप उनके KeyUp घटना पर एक ही बात आप बस उन्हें एक आम सीएसएस वर्ग दे सकते हैं (उदाहरण के लिए commoncss) करते हैं और इस तरह घटना KeyUp आवेदन करना होगा ।

$(document).ready(function() { 
    $(".commoncss").keyup(function() { 
     //your code 
    }); 
}); 

यह बहुत आप कोड कम हो जाएगा के रूप में आप प्रत्येक बक्सें के लिए आईडी के आधार पर KeyUp घटना लागू करने के लिए नहीं है।

Answer 6

मुझे लगता है कि आप की जरूरत नीचे प्रोटोटाइप

$(element).on('input',function(){code}) 

Answer 7

मैं (इसलिए यह मेरी लिंटर गुजारें सकता) एक ES6 उदाहरण के लिए देख रहा था है तो अन्य लोगों को जो उसी के लिए देख रहे हैं के लिए :

$('#dSuggest').keyup((e) => { 
    console.log(e.currentTarget.value); 
}); 

मैं भी KeyUp उपयोग करें, क्योंकि आप वर्तमान मूल्य में भर जाता है कि मिलेगा।