डेटा सत्यापन और सत्यापन जैसे परिदृश्यों में, जब भी उपयोगकर्ता द्वारा कीबोर्ड से एकल दबाई गई कुंजी जारी की जाती है, तो फ़ील्ड तत्वों की शैली बदल जाती है। प्रत्येक कुंजी प्रेस या रिलीज़ से संबंधित स्टाइल का यह परिवर्तन jQuery द्वारा प्रदान किए गए इवेंट हैंडलर के माध्यम से किया जाता है। विशिष्ट होने के लिए, इवेंट हैंडलर या विधि जो किसी दबाई गई कुंजी के रिलीज़ होने पर फ़ंक्शन को डील करती है या प्रारंभ करती है, वह है ' तनाव के स्थिति में ()' तरीका।
दूसरी ओर, वह विधि जो फ़ंक्शन कुंजी को दबाए जाने पर संभालती है या आह्वान करती है वह है ' चाबी नीचे ()' विधि और आप हमारी संबद्धता की जांच कर सकते हैं लेख इस घटना के लिए.
इस ब्लॉग में, हम jQuery keyup() विधि का संक्षिप्त विवरण प्रदान करेंगे।
JQuery keyup() विधि का उपयोग कैसे करें?
jQuery ' तनाव के स्थिति में ()' विधि अनाम फ़ंक्शन को ट्रिगर करती है जब भी उपयोगकर्ता चयनित फ़ील्ड के अंदर कुंजियाँ दबाना या दर्ज करना बंद कर देता है। इस पद्धति का उपयोग वास्तविक समय में चयनित तत्व पर गतिशील स्टाइल लागू करने के लिए भी किया जाता है।
वाक्य - विन्यास
keyup() jQuery विधि के लिए प्रयुक्त सिंटैक्स इस प्रकार है:
$ ( 'यह' ) . तनाव के स्थिति में ( कस्टमफ़ंक )
उपरोक्त वाक्यविन्यास में, ' यह 'चयनित HTML तत्व है, और' कस्टमफ़ंक ' एक फ़ंक्शन है जिसे ' द्वारा निष्पादित किया जाता है तनाव के स्थिति में 'पर विधि' यह ”।
आइए गहरी समझ के लिए कुछ उदाहरण लें।
उदाहरण 1: 'कीअप()' विधि का उपयोग करके टेक्स्ट का रंग बदलना
इस मामले में, जब उपयोगकर्ता पहले से दबाई गई कुंजी को छोड़ता है तो दर्ज किए गए टेक्स्ट का रंग एक अलग रंग में बदल जाएगा जैसा कि नीचे दिखाया गया है:
< एचटीएमएल >
< सिर >
< लिखी हुई कहानी स्रोत = 'https://code.jquery.com/jquery-3.7.0.js' < / लिखी हुई कहानी >
< लिखी हुई कहानी >
$(दस्तावेज़).तैयार(फ़ंक्शन() {
$('#demo').keyup(function() {
$('#डेमो').css('रंग', 'फॉरेस्टग्रीन');
});
});
< / लिखी हुई कहानी >
< / सिर >
< शरीर >
< डिव >
Linuxhint डेटा दर्ज करें: < इनपुट पहचान = 'डेमो' प्रकार = 'मूलपाठ' / >
< / डिव >
< / शरीर >
< / एचटीएमएल >
उपरोक्त कोड का विवरण नीचे दिया गया है:
- सबसे पहले, इस पर जाकर ऑनलाइन सीडीएन डालकर प्रोजेक्ट में jQuery आयात करें जोड़ना आधिकारिक दस्तावेज़ीकरण का.
- इसके बाद, एक अनाम फ़ंक्शन बनाएं जिसे 'जब' कहा जाएगा दस्तावेज़ ” या पेज लोड हो जाता है। यह फ़ंक्शन 'डेमो' की आईडी के साथ HTML तत्व का चयन करता है और 'संलग्न करता है' तनाव के स्थिति में ()'' विधि इसके साथ।
- “ तनाव के स्थिति में ()' विधि कॉलबैक फ़ंक्शन को आमंत्रित करती है जो ' का उपयोग करती है सीएसएस ()' टेक्स्ट का फ़ॉन्ट रंग सेट करने के लिए ' हरे जंगल ”।
- अब, चयनित “< बनाएं इनपुट >' तत्व '< के अंदर शरीर >' टैग करें और इसे ' की एक आईडी निर्दिष्ट करें डेमो ”।
संकलन प्रक्रिया पूरी होने के बाद वेबपेज का पूर्वावलोकन:
आउटपुट दिखाता है कि चयनित कुंजी जारी होने पर टेक्स्ट का रंग बदल जाता है।
उदाहरण 2: पृष्ठभूमि का रंग गतिशील रूप से बदलना
इस उदाहरण में, जब भी उपयोगकर्ता दबाई गई कुंजी को छोड़ेगा तो चयनित HTML तत्व के लिए अलग-अलग पृष्ठभूमि रंग सेट किए जाएंगे। आइए इस परिदृश्य के लिए कोड पर एक नज़र डालें:
< सिर >< लिखी हुई कहानी स्रोत = 'https://code.jquery.com/jquery-3.7.0.js' < / लिखी हुई कहानी >
< लिखी हुई कहानी >
चलो पृष्ठभूमि शेड्स = [ 'एक्वामेरीन' , 'नारंगी लाल' , 'कैडेटब्लू' , 'हरे जंगल' ,
'हल्का ग्रे' , 'रेतीला भूरा' , 'मैजेंटा' , 'स्थूल लकड़ी' ] ;
चलो जे = 0 ;
$ ( दस्तावेज़ ) ।तनाव के स्थिति में ( समारोह ( आयोजन ) {
$ ( '#hgg' ) सीएसएस ( 'पृष्ठभूमि का रंग' , पृष्ठभूमि शेड्स [ जे ] ) ;
जे++;
जे = जे % 9 ;
} ) ;
< / लिखी हुई कहानी >
< / सिर >
< शरीर >
< एच 1 शैली = 'रंग: समुद्री हरा' >लिनक्सहिंट आलेख< / एच 1 < बीआर >
< डिव पहचान = 'एचजीजी' शैली = 'पैडिंग: 10px' >
< एच 2 >jQuery keyup का उपयोग अलग सेट करने के लिए किया जाता है पृष्ठभूमि हर बार जब कुंजी जारी की जाती है।< / एच 2 >
< बीआर / >
< / डिव >
< / शरीर >
उपरोक्त कोड का विवरण:
- प्रारंभ में, '<' के अंदर jQuery CDN जोड़कर अपने प्रोजेक्ट में jQuery आयात करें सिर >” टैग.
- फिर, 'नाम की एक सरणी बनाएं पृष्ठभूमि शेड्स जिसमें आठ यादृच्छिक रंग शामिल हैं।
- अगला, ' तनाव के स्थिति में ()' विधि 'से जुड़ी हुई है दस्तावेज़ ” और यह एक अनाम कॉलबैक फ़ंक्शन को आमंत्रित करता है। यह फ़ंक्शन 'आईडी' के साथ HTML तत्व का चयन करता है hgg 'और सीएसएस लागू करता है' पृष्ठभूमि का रंग ' संपत्ति।
- सरणी ' पृष्ठभूमि शेड्स ' को CSS गुणों के मान के रूप में पारित किया जाता है और सूचकांक को ' पर सेट किया जाता है जे ' चर। यह वेरिएबल हर बार एक से बढ़ाया जाता है और 'से पुनः आरंभ होता है 0 ' सूचकांक जब मूल्य पहुंचता है ' 8 ”। क्योंकि सरणी में अधिकतम सूचकांक है ' 7 ”।
- उसके बाद, एक चयनित बनाएं डिव 'की आईडी वाला तत्व' hgg ”, दबाई गई कुंजी जारी होने पर इस तत्व का पृष्ठभूमि रंग बदल जाएगा।
संकलन के बाद वेबपेज का पूर्वावलोकन:
आउटपुट पुष्टि करता है कि दबाए गए या चयनित कुंजी के रिलीज़ होने पर चयनित HTML तत्व के लिए पृष्ठभूमि का रंग हर बार बदल रहा है। यह सब 'का उपयोग करने के बारे में है तनाव के स्थिति में ()' तरीका।
निष्कर्ष
jQuery ' तनाव के स्थिति में ()' विधि दबाए गए कुंजी जारी होने पर चयनित HTML तत्व पर कॉलबैक फ़ंक्शन ट्रिगर करती है। जब कुंजी दबाई जा रही हो तो यह विधि कॉल नहीं करती है, बल्कि कुंजी दबाते समय या कुंजी दबाते समय यह फ़ंक्शन कॉलबैक फ़ंक्शन निष्पादित करता है। इस ब्लॉग में jQuery keyup() विधि के उपयोग और कार्यप्रणाली के बारे में बताया गया है।