HTML तत्व पर फ़ोकस देने के लिए HTML DOM फ़ोकस () विधि का उपयोग किया जाता है। सभी HTML तत्वों पर फ़ोकस लागू नहीं किया जा सकता है। उदाहरण के लिए:आप

टैग पर फ़ोकस नहीं कर सकते। किसी तत्व से फ़ोकस हटाने के लिए ब्लर () विधि का उपयोग करें।

सिंटैक्स

निम्नलिखित वाक्य रचना है -

HTMLElementObject.focus()

उदाहरण

आइए फोकस () विधि का एक उदाहरण देखें -

  <सिर> <शैली> इनपुट [टाइप =टेक्स्ट]:फोकस, पी:सक्रिय {रंग:नीला; फ़ॉन्ट-आकार:35px; पृष्ठभूमि-रंग:हल्का गुलाबी; सीमा:2px ठोस नीला; } इनपुट [प्रकार =पाठ] {रंग:काला; फ़ॉन्ट-आकार:20px; }
focus() विधि उदाहरण
USERNAME : 
 
<इनपुट प्रकार ="बटन" ऑनक्लिक ="सक्षम फोकस ()" मूल्य ="फोकस"> <इनपुट प्रकार ="बटन" ऑनक्लिक ="अक्षम फोकस ()" मूल्य ="ब्लूआर"> शरीर> 
आउटपुट
 

 यह निम्नलिखित आउटपुट उत्पन्न करेगा -
 

 
 

 फोकस बटन पर क्लिक करने पर -
 

 
 

 BLUR बटन पर क्लिक करने पर -
 

 
 

 उपरोक्त उदाहरण में -
 

 हमने सबसे पहले एक टेक्स्ट बॉक्स बनाया है जिसका आईडी “USR1” है और आकार और अधिकतम लम्बाई के गुण क्रमशः 5 और 10 के बराबर हैं।
 
<लेबल>USERNAME :<इनपुट id="USR1" type="text" size=5 maxlength=10>
 

 हमने दो अलग-अलग सीएसएस शैलियों का निर्माण किया है जब टेक्स्टबॉक्स फोकस में है, सक्रिय है और जब यह नहीं है -
 
 इनपुट [टाइप =टेक्स्ट]:फोकस, इनपुट [टाइप =टेक्स्ट]:सक्रिय {रंग:नीला; फ़ॉन्ट-आकार:35px; पृष्ठभूमि-रंग:हल्का गुलाबी; सीमा:2 पीएक्स ठोस नीला;} इनपुट [प्रकार =पाठ] {रंग:काला; फ़ॉन्ट-आकार:20px;}
 

 हमने तब दो बटन FOCUS और BLUR बनाए हैं जो उपयोगकर्ता द्वारा क्लिक किए जाने पर क्रमशः enableFocus () और डिसेबलफोकस () विधि को निष्पादित करेंगे -
 
 

 सक्षम फोकस () विधि getElementById () विधि का उपयोग करके "टेक्स्ट" प्रकार के साथ इनपुट तत्व प्राप्त करती है और टेक्स्टबॉक्स पर फोकस सेट करने के लिए इसकी फोकस() विधि को सक्षम करती है जो हमारे टेक्स्टबॉक्स पर हमारी फोकस शैली लागू करती है। DisableFocus () विधि को "USR1" आईडी के साथ इनपुट तत्व मिलता है और उस पर ब्लर () विधि को कॉल करता है जो टेक्स्टबॉक्स से फोकस को हटा देता है जो हमारी सामान्य सीएसएस शैली को लागू करता है यानी यह डिफ़ॉल्ट शैली पर वापस आ जाता है -
 
function enableFocus() { document.getElementById("USR1").focus();}function disableFocus() { document.getElementById("USR1").blur();}