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 onload फ़ंक्शन को अपनी .js फ़ाइल में जोड़ें:
window.onload = function() { document.getElementById("firstField").focus(); };पेज लोड पर ऑटो-फोकस इनपुट फील्ड डेमो
नीचे डेमो देखें:
https://codepen.io/StrengthandFreedom/pen/yLypogQ
कोड कैसे काम करता है
HTML फॉर्म को देखें। HTML फॉर्म में पहले इनपुट फील्ड की ID firstField कहलाती है — यही हम JavaScript से टार्गेट करते हैं।
JavaScript में, हम window.onload नामक एक onload इवेंट सेट करते हैं जो तुरंत चलता है जब आप किसी नए पेज पर जाते हैं या अपना ब्राउज़र रिफ्रेश करते हैं।
onload इवेंट एक फ़ंक्शन निष्पादित करता है जो document.getElementById के माध्यम से firstField ID वाले इनपुट फील्ड को ढूंढता है और फिर JavaScript focus() मेथड का उपयोग करके इनपुट फील्ड की स्टेट को फोकस पर सेट करता है।
समस्या निवारण
क्या आपके इनपुट फील्ड से फोकस आउटलाइन अचानक गायब हो जाता है? ऐसा इसलिए है क्योंकि हमने जो कोड लिखा है वह पहले इनपुट फील्ड को प्रत्येक पेज लोड पर केवल एक बार ऑटो-फोकस करता है। यदि आप ऑटो-फोकस्ड इनपुट फील्ड के अंदर तुरंत टाइप करने के अलावा कुछ भी करते हैं, तो यह फिर से ऑटो-फोकस नहीं करेगा, जब तक कि आप एक और पेज रिफ्रेश न करें।
