वेनिला जावास्क्रिप्ट के साथ पहले फॉर्म इनपुट फ़ील्ड को ऑटो-फोकस कैसे करें

HTML प्रपत्रों में पृष्ठ लोड पर प्रथम इनपुट फ़ील्ड को स्वतः फ़ोकस करने का तरीका जानें

अच्छे UX डिज़ाइन के अंतर्निहित परिसरों में से एक यह है कि जितना संभव हो सके a से b तक जाने के लिए अधिक से अधिक चरणों को सहेजा जाए ताकि हमारे उपयोगकर्ता जो चाहें तेज़ प्राप्त कर सकें।

किसी को भी फ़ॉर्म भरने में मज़ा नहीं आता, विशेष रूप से लंबे फ़ॉर्म नहीं, तो चलिए पेज लोड होने पर अपने HTML फॉर्म में पहले इनपुट फ़ील्ड को ऑटो-फ़ोकस करके अपने उपयोगकर्ताओं को थोड़ा समय बचाते हैं।

HTML फ़ॉर्म

इस फॉर्म कोड को अपने HTML दस्तावेज़ में जोड़ें:

<form>
	First name:<br>
	<input type="text" name="firstname" id="firstField"><br>Last name:<br>
	<input type="text" name="lastname"><br>Country:<br>
	<input type="text" name="lastname">
</form>

JavaScript

इस JavaScript ऑनलोड फ़ंक्शन को अपनी .js फ़ाइल में जोड़ें:

window.onload = function() {
  document.getElementById("firstField").focus();
};

पेज लोड डेमो पर ऑटो-फ़ोकस इनपुट फ़ील्ड

नीचे दिया गया डेमो देखें:

https://codepen.io/StrengthandFreedom/pen/yLypogQ

कोड कैसे काम करता है

एचटीएमएल फॉर्म पर एक नज़र डालें। HTML फॉर्म में पहले इनपुट फील्ड में आईडी को firstField . कहा जाता है — यही वह है जिसे हम जावास्क्रिप्ट के साथ लक्षित करते हैं।

जावास्क्रिप्ट में, हम window.onload . नामक एक ऑनलोड ईवेंट सेट करते हैं जब आप किसी नए पृष्ठ पर जाते हैं या अपने ब्राउज़र को रीफ़्रेश करते हैं तो यह तुरंत चलता है।

ऑनलोड ईवेंट एक फ़ंक्शन निष्पादित करता है जो firstField . के साथ इनपुट फ़ील्ड ढूंढता है document.getElementById . के माध्यम से आईडी और फिर JavaScript focus() . का उपयोग करता है राज्य . सेट करने की विधि ध्यान केंद्रित करने के लिए इनपुट फ़ील्ड का।

समस्या निवारण

क्या आपके इनपुट फील्ड से फोकस आउटलाइन अचानक गायब हो जाती है? ऐसा इसलिए है क्योंकि हमने जो कोड लिखा है वह केवल पहले इनपुट फ़ील्ड को एक बार ऑटो-फ़ोकस करता है प्रत्येक पृष्ठ लोड पर। अगर आप ऑटो-फ़ोकस्ड इनपुट फ़ील्ड के अंदर तुरंत टाइप करने के अलावा कुछ भी करते हैं, तो यह फिर से ऑटो-फ़ोकस नहीं होगा, जब तक कि आप दूसरा पेज रीफ़्रेश नहीं करते।