मैं jquery कैसे प्राप्त कर सकता हूं।


101

मुझे मिला:

$(someTextInputField).keypress(function() {
  alert($(this).val());
});

अब चेतावनी हमेशा मान को वापस कर देती है (जैसे कि मैदान खाली है, मैं 'ए' टाइप करता हूं और अलर्ट मुझे '' टाइप करता है) फिर मैं टाइप करता हूं 'बी' और अलर्ट मुझे 'ए' देता है ...)। लेकिन मैं मान चाहता हूं कि कीबोर्ड के बाद - मैं ऐसा कैसे कर सकता हूं?

पृष्ठभूमि: जैसे ही टेक्स्ट फ़ील्ड में कम से कम एक वर्ण होता है, मैं एक बटन सक्षम करना चाहता हूं। इसलिए मैं इस परीक्षण को प्रत्येक की-ईवेंट पर चलाता हूं, लेकिन लौटे वैल () का उपयोग करके परिणाम हमेशा एक कदम पीछे रहता है। परिवर्तन () ईवेंट का उपयोग करना मेरे लिए कोई विकल्प नहीं है क्योंकि तब तक टेक्स्ट बॉक्स छोड़ने तक बटन अक्षम हो जाता है। अगर ऐसा करने का एक बेहतर तरीका है, तो मुझे यह सुनकर खुशी होगी!


यदि पाठ हटा दिया जाता है तो क्या बटन फिर से अक्षम हो जाना चाहिए? यदि हां, तो आपको शायद कीपर के साथ रहना होगा।
ब्रिलियनड

जवाबों:


152

बदले keypressके लिए keyup:

$(someTextInputField).on("keyup", function() {
  alert($(this).val());
});

keypressजब कुंजी को दबाया जाता keyupहै तो निकाल दिया जाता है, कुंजी जारी होने पर निकाल दिया जाता है।


@ ब्रिलियनड आप सही कह रहे हैं। मैंने इसके लिए एक वर्कअराउंड बनाया, यह नीचे पोस्ट किया गया है।
डेविड ओलिवरोस

7
कैसे आप iPhone / Android उपकरणों पर इसे पूरा करते हैं? वे कीप फंक्शन का समर्थन नहीं करते हैं।
मरिज डेन हाउटिंग

4
Keypress की परिभाषा बिलकुल सही नहीं है। यह कीडाउन की परिभाषा है। देख quirksmode.org/dom/events/keys.html
Challet

59

आश्चर्य है कि किसी ने भी "इनपुट" घटना का उल्लेख नहीं किया है:

$(someTextInputField).on('input', function() {
  alert($(this).val());
});

सिफारिश की।

https://developer.mozilla.org/en-US/docs/Web/Events/input


8
वाह, यह कई अनुत्तरित / बुरी तरह से उत्तर दिए गए SO प्रश्नों का उत्तर है।
बेन रेसिकॉट

4
यह भी बहुत अच्छा है जब आपको इनपुट फ़ील्ड में एरो कीज़, शिफ्ट आदि दबाने की ज़रूरत होती है।
होवेडो

2
caniuse.com/#search=input अपेक्षाकृत अच्छा ब्राउज़र समर्थन। हर की-अप को सुनने से ज्यादा बेहतर जवाब।
जेम्स हग

1
यह मेरा दिन बचाता है! धन्यवाद। मैंने निम्नलिखित कोड का उपयोग किया: $ ('। Subject_mark')। ("इनपुट", फंक्शन () {var $ th = $ (यह); $ th.val ($ th.val) (।)। / (^ ^ 0-9] / g, फंक्शन (str) {रिटर्न '';}));
arsho


5

वैकल्पिक रूप से, आप 0 के टाइमआउट के साथ कीडाउन इवेंट का उपयोग कर सकते हैं।

इस तरह, परिवर्तनों को तुरंत लागू किया जाएगा, जब उपयोगकर्ता कुंजी दबाए रखना बंद कर देगा।

$(someTextInputField).on("keydown", function() {
  setTimeout(function($elem){
    alert($elem.val());
  }, 0, $(this));
});

यह अभी भी बैकस्पेस को दबाए रखने के मामले में अजीब तरह से व्यवहार करेगा ... शायद 0 के टाइमआउट के साथ?
ब्रिलियनड

आह, कोई बात नहीं, ओपी निर्दिष्ट नहीं करता है कि क्या होना चाहिए अगर पाठ क्षेत्र साफ़ हो जाए।
ब्रिलियनड

4

आप onchangeकिसी भी महत्वपूर्ण घटनाओं का उपयोग करने के बजाय एक इवेंट हैंडलर को हुक करना चाह सकते हैं ।

$(someTextInputField).change(function() {
    alert($(this).val());
});

Edit > Pasteराइट-क्लिक का उपयोग करना या फिर पेस्ट एक परिवर्तन घटना को आग लगाएगा, लेकिन एक महत्वपूर्ण घटना नहीं। ध्यान दें कि कुछ ब्राउज़र एक पेस्ट पर एक महत्वपूर्ण घटना का अनुकरण कर सकते हैं (हालांकि मुझे किसी का पता नहीं है) लेकिन आप उस व्यवहार को नहीं गिन सकते ।


4

कुछ इस तरह की कोशिश करो:

$('#someField').keypress(function() {
  setTimeout(function() {
    if ($('#someField').val().length > 0)
      $('#theButton').attr('disabled', false);
  }, 1);
});

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

संपादित करें - या आप "की-अप" का उपयोग कर सकते हैं जैसे हर कोई कहता है, हालांकि इसके शब्दार्थ अलग हैं।


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

1
सही; इसका मतलब है कि "यह शब्दार्थ अलग हैं"।
नुकीले
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.