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

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

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

Comments

काम करता है, लेकिन jquery के साथ 2.x यह अब पुराना है क्योंकि नीचे दिए गए जवाब पर इनपुट और इनपुट का उपयोग करना सबसे अच्छा तरीका है।

— पियोट्र कुला

@ppumkin: सिर्फ इसलिए कि jQuery 2 बाहर है, इसका मतलब यह नहीं है कि लोगों को IE8 और कम समर्थन की आवश्यकता नहीं है। और मुझे डॉक्स में कुछ भी नहीं दिखता है जो inputघटना प्रकार के लिए वास्तविक समर्थन का सुझाव देता है ।

— कुकी राक्षस

आप सही हैं, उन्हें IE, बिंदु का समर्थन करना बंद कर देना चाहिए। JQuery 1.x में अधिकांश "वर्कअराउड्स" IE के लिए हैं, इसलिए इसे वास्तव में jQuerIE का नाम दिया जाना चाहिए।

— पियोट्र कुला

Answer 2

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

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

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

यहां डेमो करें

Comments

इसे एक उचित उत्तर के रूप में चिह्नित किया जाना चाहिए - कीप शायद गायब चरित्र समस्या को हल करता है, लेकिन यह निर्धारित करने के लिए समस्याग्रस्त है कि क्या चरित्र वास्तव में लिखा गया था (और कुंजी "टैब" या "होम" उदाहरण के लिए नहीं था)। आपके लिए +1

— नाशी

समस्या यह है कि यह पुराने ब्राउज़रों में समर्थित नहीं है और IE9 हटाए गए वर्णों का जवाब नहीं देता है।

— फोनिक्स

Answer 3

.keyupकी-बोर्ड की जगह इस्तेमाल करें ।

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

यहाँ डेमो

.keypressJQuery डॉक्स से जानकारी:

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

Comments

keyupबहुत धीमा है, और एक कुंजी को जारी किए बिना दबाया और रखा जा सकता है और चीजें होनी चाहिए। keydownथोड़ा मध्यांतर के साथ उपयोग करने के लिए बेहतर है ताकि मूल्य वास्तव में बदल जाए।

— vsync

एकमात्र नकारात्मक पहलू यह है कि यदि उपयोगकर्ता एक से अधिक कीबोर्ड चरित्र को एक साथ दबाता है, तो यह सही तरीके से पंजीकृत नहीं होगा।

— vsync

Answer 4

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

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

Comments

keyupदेरी कुछ उद्देश्यों के लिए बहुत धीमी है, और ऑटो-फ़िल्टर संशोधक कुंजी भी नहीं है। यह वास्तव में मेरे लिए बेहतर काम करता है।

— अल्बर्ट बोरी

सबसे बढ़िया उत्तर। कीप - धीमा और दो कुंजी दबाए हुए @ की तरह आकर्षण नहीं पकड़ सकता।

— रोमा रश

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");
    });
});

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

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

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

Answer 6

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

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

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

Answer 7

बस अपने कॉल करने के लिए एक टाइमआउट का उपयोग करें; जब ईवेंट स्टैक समाप्त हो जाता है (यानी डिफ़ॉल्ट ईवेंट के बाद कॉल किया जाता है)

$("body").on('keydown', 'input[type=tel]', function (e) {
    setTimeout(() => {
        formatPhone(e)
    }, 0)
});

Answer 8

मुझे लगता है कि आपको नीचे दिए गए प्रोटोटाइप की आवश्यकता है

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

Answer 9

jQuery के कीप के बाद इनपुट मूल्य मिलता है

https://www.tutsmake.com/jquery-keypress-event-detect-enter-key-pressed/

i = 0;  
$(document).ready(function(){  
    $("input").keypress(function(){  
        $("span").text (i += 1);  
    });  
}); 

<!DOCTYPE html>  
<html>  
<head>  
<title>jQuery keyup() Method By Tutsmake Example</title> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>  
<body>  
Enter something: <input type="text">  
<p>Keypresses val count: <span>0</span></p>  
</body>  
</html>