परिचय
किसी विशेष एलिमेंट पर प्रोग्रामेटिक रूप से फोकस सेट करने के लिए, focus() मेथड का उपयोग करें। जब एलिमेंट के पास ID नहीं है, तो querySelector() या querySelectorAll() का उपयोग करके क्लास या अन्य सेलेक्टर्स द्वारा चयन करें।
उदाहरण
<!DOCTYPE html> <html lang="hi"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>एलिमेंट फोकस</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> </head> <body> <span class="TEXT_FOCUS" tabindex="-1"><center>फोकस के लिए टेक्स्ट बॉक्स</center></span><br> <button id="focusButton">मुझे क्लिक करें ताकि टैब फोकस पर आ जाए</button> <script> document.getElementById('focusButton').addEventListener('click', function() { document.querySelectorAll('.TEXT_FOCUS')[0].focus(); }); </script> </body> </html>
आउटपुट
जब आप बटन पर क्लिक करते हैं, तो फोकस एक विशेष एलिमेंट पर होगा। स्नैपशॉट निम्नानुसार है:
चलाने के निर्देश
उपरोक्त प्रोग्राम को चलाने के लिए, फ़ाइल का नाम anyName.html (index.html) सेव करें और फ़ाइल पर राइट-क्लिक करके VS कोड एडिटर में "Open with Live Server" विकल्प चुनें।
मुख्य बिंदु
tabindex="-1"नॉन-इंटरैक्टिव एलिमेंट्स (div, span) को प्रोग्रामेटिक रूप से फोकस करने योग्य बनाता हैquerySelector()पहला मिलान लौटाता है;querySelectorAll()[0]समानfocus()मेथड फोकस सेट करता है;blur()इसे हटाता है- फोकस करने योग्य एलिमेंट्स:
<input>,<button>,<a>,<textarea>,<select>, औरtabindexवाले एलिमेंट्स
