जावास्क्रिप्ट में टेक्स्ट फ़ील्ड्स का फोकस
मान लीजिए कि हमारे पास एक इनपुट है। आप इस इनपुट पर क्लिक कर सकते हैं और उसके बाद उसमें कर्सर ब्लिंक करने लगेगा और आप उसमें टेक्स्ट टाइप कर सकेंगे।
इस स्थिति के बारे में कहा जाता है कि इनपुट में अभी इनपुट फोकस है। व्यवहार में इसका मतलब है कि यदि कीबोर्ड से टेक्स्ट टाइप करना शुरू किया जाए, तो वह टेक्स्ट उस इनपुट में जाएगा जिसमें अभी इनपुट फोकस है। यदि उसके बाद इनपुट के बाहर कहीं क्लिक किया जाए, तो यह इनपुट फोकस खो देगा और उसमें टेक्स्ट टाइप नहीं किया जा सकेगा।
इनपुट द्वारा फोकस प्राप्त करने या खोने के क्षण को पकड़ने के लिए,
जावास्क्रिप्ट में विशेष इवेंट्स प्रदान किए गए हैं:
इवेंट focus
इनपुट द्वारा फोकस प्राप्त करने को पकड़ने की अनुमति देता है,
और इवेंट blur - फोकस खोने को। आइए व्यवहार में
कोशिश करते हैं। मान लीजिए कि हमारे पास एक इनपुट है:
<input id="elem" value="text">
इसका रेफरेंस एक वेरिएबल में प्राप्त करते हैं:
let elem = document.querySelector('#elem');
और अब ऐसा करते हैं कि फोकस प्राप्त करने पर कंसोल में इनपुट का करंट टेक्स्ट प्रिंट हो जाए:
elem.addEventListener('focus', function() {
console.log(elem.value);
});
एक इनपुट दिया गया है। फोकस प्राप्त करने पर उसमें
नंबर 1 लिखें, और फोकस खोने पर -
नंबर 2।
एक इनपुट दिया गया है। मान लीजिए इसमें एक नंबर टाइप किया जाता है। फोकस खोने पर इस नंबर का वर्ग स्क्रीन पर प्रिंट करें।
एक इनपुट दिया गया है, जिसमें शुरू में कोई टेक्स्ट है। इनपुट द्वारा फोकस प्राप्त करने पर इस इनपुट की सामग्री को साफ करें।
