यह लेख जावास्क्रिप्ट में टैब कुंजी का पता लगाने में आपका मार्गदर्शन करेगा।
जावास्क्रिप्ट में टैब कुंजी का पता कैसे लगाएं?
जावास्क्रिप्ट में टैब कुंजी का पता लगाने के लिए, निम्नलिखित तकनीकों को लागू करें:
- ' क्वेरी चयनकर्ता () ' तरीका
- ' getElementbyId () ' तरीका
उल्लिखित दृष्टिकोणों को एक-एक करके प्रदर्शित किया जाएगा!
विधि 1: दस्तावेज़ का उपयोग करके जावास्क्रिप्ट में टैब कुंजी का पता लगाएं। querySelector () विधि
' दस्तावेज़.क्वेरी चयनकर्ता () 'विधि सीएसएस चयनकर्ता से मेल खाने वाले पहले तत्व तक पहुंचती है, और फिर addEventListener() विधि एक्सेस किए गए तत्व में एक ईवेंट हैंडलर जोड़ती है। इन विधियों को इनपुट प्रकार तक पहुँचने के लिए लागू किया जा सकता है और यह पता लगाया जा सकता है कि टैब कुंजी को दबाया गया है या नहीं जब इसका मान दर्ज किया गया है।
वाक्य - विन्यास
तत्व। AddEventListener ( प्रतिस्पर्धा , समारोह , कैप्चर का उपयोग करें )
दिए गए सिंटैक्स में, ' प्रतिस्पर्धा 'घटना के नाम को संदर्भित करता है,' समारोह 'घटना होने पर निष्पादित करने के लिए विशिष्ट कार्य है, और' कैप्चर का उपयोग करें 'वैकल्पिक तर्क है।
दस्तावेज़। क्वेरी चयनकर्ता ( सीएसएस चयनकर्ता )उपरोक्त वाक्य रचना में, ' सीएसएस चयनकर्ता 'एक या एक से अधिक CSS चयनकर्ताओं को देखें जिन्हें document.querySelector() विधि में निर्दिष्ट किया जा सकता है।
बताई गई अवधारणा की बेहतर समझ के लिए निम्नलिखित उदाहरण को देखें।
उदाहरण
सबसे पहले, इनपुट प्रकार को 'के रूप में निर्दिष्ट करें' मूलपाठ 'प्रारंभिक प्लेसहोल्डर मान और' में एक शीर्षक के साथ <एच> ' उपनाम:
< एच 2 > परिणाम < / एच 2 >
अगला, 'लागू करें' दस्तावेज़.क्वेरी चयनकर्ता () क्रमशः निर्दिष्ट इनपुट और शीर्षक तक पहुँचने के लिए विधि और उन्हें 'नाम के चर में संग्रहीत करें' इनपुट ' तथा ' नतीजा ':
इनपुट दें = दस्तावेज़। क्वेरी चयनकर्ता ( 'इनपुट' ) ;परिणाम आने दो = दस्तावेज़। क्वेरी चयनकर्ता ( 'एच2' ) ;
अब, 'जोड़ें चाबी नीचे AddEventListener () विधि का उपयोग करके इनपुट फ़ील्ड के साथ ईवेंट। यह घटना उपयोगकर्ता को सूचित करेगी जब भी ' टैब 'की सहायता से निम्नलिखित शर्त को लागू करके इनपुट क्षेत्र में कुंजी दबाया जाता है' आंतरिक पाठ ' संपत्ति:
इनपुट। AddEventListener ( 'चाबी नीचे' , ( तथा ) => {यदि ( तथा। चाभी === 'टैब' ) {
नतीजा। आंतरिक पाठ = 'टैब कुंजी दबाया गया' ;
} वरना {
नतीजा। आंतरिक पाठ = 'टैब कुंजी दबाया नहीं गया' ;
}
इस मामले में, जब उपयोगकर्ता टैब कुंजी दबाएगा, तो जोड़ा गया क्रिया के बारे में सूचित करेगा:
विधि 2: दस्तावेज़ का उपयोग करके जावास्क्रिप्ट में टैब कुंजी का पता लगाएं। getElementbyId () विधि
' document.getElementById () 'विधि का उपयोग किसी विशेष HTML तत्व को उसकी आईडी के आधार पर एक्सेस करने के लिए किया जा सकता है। इनपुट फ़ील्ड प्राप्त करने के लिए इस विधि को लागू किया जा सकता है और जब भी विशेष कुंजी दबाया जाता है, जैसे टैब कुंजी, उपयोगकर्ता को सतर्क करने के लिए एक ईवेंट जोड़ें।
वाक्य - विन्यास
दस्तावेज़। getElementById ( तत्वों )दिए गए सिंटैक्स में, ' तत्वों 'एक निर्दिष्ट तत्व की आईडी को संदर्भित करता है।
आइए निम्नलिखित उदाहरण का अवलोकन करें।
उदाहरण
नीचे दिए गए उदाहरण में, एक इनपुट प्रकार और एक प्लेसहोल्डर मान शामिल करें जैसा कि पिछली विधि में चर्चा की गई है:
अब, 'का उपयोग करके इनपुट फ़ील्ड आईडी प्राप्त करें' document.getElementById () ' तरीका।
इनपुट दें = document.getElementById ('टैब');
अंत में, 'नाम का एक ईवेंट जोड़ें' चाबी नीचे AddEventListener () विधि में, जो उपयोगकर्ता को जब भी 'चेतावनी देगा' टैब 'कुंजी दबाई जाती है:
इनपुट। AddEventListener ( 'चाबी नीचे' , ( तथा ) => {यदि ( तथा। चाभी === 'टैब' ) {
चेतावनी ( 'टैब कुंजी दबाया गया' ) ;
}
} ) ;
उत्पादन
हमने जावास्क्रिप्ट में टैब कुंजी का पता लगाने के सभी सरल तरीकों पर चर्चा की है।
निष्कर्ष
जावास्क्रिप्ट में टैब कुंजी का पता लगाने के लिए, “का उपयोग करें” एडवेन्ट लिस्टनर () ' साथ ' दस्तावेज़.क्वेरी चयनकर्ता () 'इनपुट प्रकार प्राप्त करने और निर्दिष्ट कुंजी का पता लगाने के लिए एक ईवेंट लागू करने की विधि' getElementbyId () 'इसकी आईडी के आधार पर इनपुट फ़ील्ड लाने और उपयोगकर्ता को अतिरिक्त शर्त पूरी होने पर सूचित करने के लिए विधि। इस ब्लॉग ने जावास्क्रिप्ट में टैब कुंजी का पता लगाने के बारे में मार्गदर्शन किया।