यह राइट-अप जावास्क्रिप्ट में टेक्स्ट एरिया वैल्यू प्राप्त करने के तरीकों की व्याख्या करेगा।
जावास्क्रिप्ट में टेक्स्ट एरिया वैल्यू कैसे प्राप्त करें?
पाठ क्षेत्र का मान निम्नलिखित दृष्टिकोणों का उपयोग करके जावास्क्रिप्ट में प्राप्त किया जा सकता है:
- ' getElementById () ' तरीका।
- ' ऐडइवेंट लिस्टनर () ' तरीका।
- ' jQuery ”।
दृष्टिकोण 1: getElementById () विधि का उपयोग करके जावास्क्रिप्ट में टेक्स्ट एरिया वैल्यू प्राप्त करें
' getElementById () 'विधि निर्दिष्ट के साथ एक तत्व तक पहुँचती है' पहचान ”। इस विधि को इनपुट टेक्स्ट फ़ील्ड लाने और उसमें दर्ज मान वापस करने के लिए लागू किया जा सकता है।
वाक्य - विन्यास
दस्तावेज़। getElementById ( तत्व )
दिए गए सिंटैक्स में:
- ' तत्व ' यह आपकी जानकारी के लिए है ' पहचान ' विशेष तत्व के खिलाफ लाया जाना है।
उदाहरण
आइए निम्नलिखित उदाहरण देखें:
आइए नीचे दिए गए कोड में निम्नलिखित चरणों को लागू करें:
< h3 > पाठ क्षेत्र मान प्राप्त करें में जावास्क्रिप्ट h3 >
कुछ लिखो : < निवेष का प्रकार = 'मूलपाठ' पहचान = 'टेक्स्ट' प्लेसहोल्डर = 'पाठ दर्ज करें...' >
< बटन ऑनक्लिक = 'टेक्स्टएरियावैल्यू ()' > मूल्य प्राप्त करें बटन >
निम्न चरणों का पालन करें:
- पहले चरण में, बताए गए शीर्षक को निर्दिष्ट करें।
- उसके बाद, निर्दिष्ट के साथ इनपुट टेक्स्ट फ़ील्ड शामिल करें ' पहचान ' तथा ' प्लेसहोल्डर ' मूल्य।
- इसके अलावा, संलग्न के साथ एक बटन बनाएं ' क्लिक पर ” समारोह textareaValue () पर रीडायरेक्ट करने वाली घटना
आइए कोड के जावास्क्रिप्ट भाग पर आगे बढ़ते हैं:
< लिखी हुई कहानी >समारोह textareaValue ( ) {
होने देना प्राप्त = दस्तावेज़। getElementById ( 'टेक्स्ट' ) . मूल्य
चेतावनी ( प्राप्त )
}
लिखी हुई कहानी >
उपरोक्त जावास्क्रिप्ट कोड में:
- नाम का एक समारोह घोषित करें ' पाठ क्षेत्र मान () ”।
- इसकी परिभाषा में, इनपुट टेक्स्ट फ़ील्ड को इसकी निर्दिष्ट आईडी द्वारा 'का उपयोग करके एक्सेस करें' getElementById () ' तरीका।
- साथ ही, 'लागू करें' मूल्य ” संपत्ति दर्ज पाठ मूल्य को पुनः प्राप्त करने के लिए।
- अंत में, पाठ क्षेत्र मान को 'के माध्यम से प्रदर्शित करें' चेतावनी 'डायलॉग बॉक्स।
उत्पादन
उपरोक्त आउटपुट में, यह देखा जा सकता है कि दर्ज किया गया मान अलर्ट डायलॉग बॉक्स के माध्यम से प्राप्त किया जाता है।
दृष्टिकोण 2: AddEventListener () विधि का उपयोग करके जावास्क्रिप्ट में टेक्स्ट एरिया वैल्यू प्राप्त करें
' ऐडइवेंट लिस्टनर () 'विधि का उपयोग' को संबद्ध करने के लिए किया जाता है प्रतिस्पर्धा 'एक तत्व के साथ। इस विधि का उपयोग किसी ईवेंट को फ़ंक्शन में संलग्न करने के लिए किया जा सकता है जैसे कि कंसोल पर प्रत्येक इनपुट पक्ष पर पाठ क्षेत्र मान प्राप्त किया जाता है।
वाक्य - विन्यास
तत्व। addEventListener ( प्रतिस्पर्धा , समारोह , कार्यकारी )उपरोक्त सिंटैक्स में:
- ' प्रतिस्पर्धा ” ईवेंट के नाम की ओर इशारा करता है।
- ' समारोह ” किसी ईवेंट के ट्रिगर पर चलने वाले फ़ंक्शन को इंगित करता है।
- ' कार्यकारी ” वैकल्पिक पैरामीटर है।
उदाहरण
आइए नीचे दिए गए उदाहरण का चरण दर चरण अनुसरण करें:
< पाठ क्षेत्र आईडी = 'टेक्स्टएरिया' पंक्तियों = '5' कॉलम = '25' प्लेसहोल्डर = ' पाठ दर्ज करें...' >> पाठ क्षेत्र >
< स्क्रिप्ट प्रकार = 'पाठ/जावास्क्रिप्ट' >
होने देना प्राप्त = दस्तावेज़। getElementById ( 'txtarea' ) ;
सांत्वना देना। लकड़ी का लट्ठा ( प्राप्त . मूल्य ) ;
प्राप्त . addEventListener ( 'इनपुट' , समारोह textareaValue ( प्रतिस्पर्धा ) {
सांत्वना देना। लकड़ी का लट्ठा ( प्रतिस्पर्धा। लक्ष्य . मूल्य ) ;
} ) ;
लिखी हुई कहानी >
उपरोक्त कोड-स्निपेट में:
- बताए गए लेबल को निर्दिष्ट करें। इसके अलावा, आवंटित करें पाठ क्षेत्र 'के निर्दिष्ट मूल्य के साथ तत्व' पहचान ' तथा ' प्लेसहोल्डर ” और इसके आयामों को भी समायोजित करें।
- कोड के जावास्क्रिप्ट भाग में, पिछले चरण में निर्दिष्ट टेक्स्टारिया तक पहुंचें और इसे 'का उपयोग करके प्रदर्शित करें' मूल्य ' संपत्ति।
- अगले चरण में, एक ईवेंट संलग्न करें ' मूलपाठ 'लाने के लिए' पाठ क्षेत्र ' का उपयोग ' ऐडइवेंट लिस्टनर () 'विधि और इसे फ़ंक्शन पर लागू करें' पाठ क्षेत्र मान () ”। ' प्रतिस्पर्धा ” इसके तर्क में उस घटना के बारे में जानकारी दी जाती है जो ट्रिगर होती है।
- इसके परिणामस्वरूप दर्ज किए गए प्रत्येक पाठ मान को साथ-साथ लॉग किया जाएगा।
उत्पादन
उपरोक्त आउटपुट से, ' प्राप्त कर रहा है ” दर्ज किए गए प्रत्येक पाठ मान का अवलोकन किया जा सकता है।
दृष्टिकोण 3: jQuery का उपयोग करके जावास्क्रिप्ट में टेक्स्ट एरिया वैल्यू प्राप्त करें
' jQuery ” को इनपुट टेक्स्ट फ़ील्ड तक पहुँचने के लिए लागू किया जा सकता है और जैसे ही डॉक्यूमेंट ऑब्जेक्ट मॉडल (DOM) लोड होता है, इसकी कार्यक्षमता को ट्रिगर किया जा सकता है।
उदाहरण
आइए नीचे दिए गए उदाहरण का पालन करें:
कुछ लिखो : < निवेष का प्रकार = 'मूलपाठ' पहचान = 'टेक्स्ट' प्लेसहोल्डर = 'पाठ दर्ज करें...' >
< बटन > मूल्य प्राप्त करें बटन >
कोड की उपरोक्त पंक्तियों में, निम्न चरणों का पालन करें:
- इसके तरीकों को लागू करने के लिए jQuery लाइब्रेरी को शामिल करें।
- विवरण दें ' इनपुट 'के निर्दिष्ट मानों के साथ टेक्स्ट फ़ील्ड के रूप में' पहचान ' तथा ' प्लेसहोल्डर 'जैसा कि पहले चर्चा की गई थी।
- साथ ही, बटन क्लिक पर मान प्राप्त करने के लिए एक बटन बनाएं।
कोड के जावास्क्रिप्ट भाग पर जाएँ:
< लिखी हुई कहानी >$ ( दस्तावेज़ ) . तैयार ( समारोह ( ) {
$ ( 'बटन' ) . क्लिक ( समारोह ( ) {
सांत्वना देना। लकड़ी का लट्ठा ( $ ( 'इनपुट टेक्स्ट' ) . वैल ( ) ) ;
} ) ;
} ) ;
लिखी हुई कहानी >
बताए गए चरणों का पालन करें:
- लागू करें ' तैयार() लोड किए गए डोम पर आगे के तरीकों को लागू करने के लिए विधि।
- बनाए गए बटन तक पहुंचें और 'अनुलग्न करें' क्लिक करें () ” इसकी विधि जो इसके पैरामीटर में बताए गए फ़ंक्शन को निष्पादित करेगी।
- क्लिक () विधि निर्दिष्ट इनपुट टेक्स्ट फ़ील्ड तक पहुंच जाएगी और कंसोल पर दर्ज किए गए टेक्स्ट मान को लॉग करेगी।
उत्पादन
इसलिए, कंसोल पर प्रकार का मान लॉग किया गया है।
ये सभी जावास्क्रिप्ट की मदद से टेक्स्ट क्षेत्र का मान प्राप्त करने के विभिन्न तरीके थे।
निष्कर्ष
' getElementById () 'विधि,' ऐडइवेंट लिस्टनर () 'विधि या' jQuery ” का उपयोग जावास्क्रिप्ट में टेक्स्ट स्पेस वैल्यू प्राप्त करने के लिए किया जा सकता है। GetElementById () विधि को इनपुट टेक्स्ट फ़ील्ड तक पहुँचने और अलर्ट के माध्यम से दर्ज किए गए टेक्स्ट क्षेत्र मान को प्रदर्शित करने के लिए लागू किया जा सकता है। AddEventListener () पद्धति का उपयोग 'संलग्न करने के लिए किया जा सकता है' इनपुट ” ईवेंट जो प्रत्येक इनपुट साइड पर टेक्स्ट मान प्राप्त करेगा। JQuery को सीधे बटन तक पहुंचने के लिए लागू किया जा सकता है और बटन पर दर्ज टेक्स्ट मान को कंसोल पर क्लिक करके पुनर्प्राप्त किया जा सकता है। यह ट्यूटोरियल बताता है कि जावास्क्रिप्ट में टेक्स्ट एरिया वैल्यू कैसे प्राप्त करें।