HTML डोम ब्लर () विधि

HTML DOM ब्लर () विधि का उपयोग किसी विशिष्ट तत्व से कीबोर्ड फ़ोकस को हटाने के लिए किया जाता है। ब्लर का उपयोग करके हम किसी भी HTML एलीमेंट में ब्लर जोड़ सकते हैं या ब्लर हटा सकते हैं। ब्लर () विधि वेबपेज के चारों ओर बेहतर नेविगेशन में मदद कर सकती है क्योंकि हम विशेष रूप से उपयोगकर्ता इनपुट के आधार पर एक तत्व पर ध्यान केंद्रित कर सकते हैं।

सिंटैक्स

ब्लर () विधि के लिए सिंटैक्स निम्नलिखित है -

ऑब्जेक्ट ब्लर ()

उदाहरण

आइए ब्लर () विधि का एक उदाहरण देखें -

example.com

फोकस दें या फोकस हटाएं...
<इनपुट प्रकार ="बटन" ऑनक्लिक ="गेटफोकस ()" मूल्य ="फोकस प्राप्त करें"> { document.getElementById ("एंकर")। फोकस (); } फंक्शन लॉसफोकस () { document.getElementById("Anchor").blur(); }

आउटपुट

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

"ध्यान केंद्रित करें" पर क्लिक करने पर -

"ध्यान केंद्रित करें" पर क्लिक करने पर, यह मूल के समान होगा -

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

हमने सबसे पहले "एंकर" और href="https://www.example.com" आईडी के साथ एक एंकर टैग बनाया है -

example.com

इसके बाद हमने एंकर टैग के लिए दो शैलियों को परिभाषित किया है, जब यह केंद्रित और सक्रिय होता है और जब यह नहीं होता है।

a{ टेक्स्ट-डेकोरेशन:कोई नहीं; फ़ॉन्ट-आकार:20px;}ए:फोकस, ए:सक्रिय {रंग:लाल; पाठ-सजावट:रेखांकित; फ़ॉन्ट-आकार:40px;}

इसके बाद हमने क्रमशः गेटफोकस () और लोफोकस () कार्यों को निष्पादित करने के लिए दो बटन "फोकस प्राप्त करें" और "फोकस खोना" बनाया है।

 <इनपुट प्रकार ="बटन" ऑनक्लिक ="गेटफोकस ()" मूल्य ="फोकस प्राप्त करें"> 

 गेटफोकस () फ़ंक्शन को वह तत्व मिलता है जिसके साथ "एंकर" आईडी जुड़ी होती है जो हमारे मामले में <एंकर> तत्व है। यह फिर इसे फोकस विधि निष्पादित करता है जो लिंक को ए:फोकस, ए:सक्रिय शैली में बदल देगा। रंग हरा होगा, टेक्स्ट को रेखांकित किया जाएगा और फ़ॉन्ट का आकार बढ़ाकर 40px कर दिया जाएगा।
 
फंक्शन गेटफोकस() { document.getElementById("Anchor").focus();}
 

 लॉसफोकस () फ़ंक्शन को वह तत्व मिलता है जिसके साथ "एंकर" आईडी जुड़ी होती है जो हमारे मामले में <एंकर> तत्व है। इसके बाद यह उपरोक्त लिंक से ध्यान हटाने के लिए अपनी धुंध () विधि को निष्पादित करता है और लिंक शैली को  तत्व के लिए मूल शैली में बदल देता है।
 
फ़ंक्शन लॉसफोकस() { document.getElementById("Anchor").blur();}