HTML DOM blur() मेथड का उपयोग किसी विशिष्ट एलिमेंट से कीबोर्ड फोकस को हटाने के लिए किया जाता है। blur का उपयोग करके हम किसी भी HTML एलिमेंट में ब्लर जोड़ या हटा सकते हैं। blur() मेथड वेबपेज पर बेहतर नेविगेशन में मदद कर सकता है क्योंकि हम यूज़र इनपुट के आधार पर किसी विशिष्ट एलिमेंट पर विशेष रूप से फोकस कर सकते हैं।
सिंटैक्स
blur() मेथड के लिए निम्नलिखिक सिंटैक्स है -
Object.blur()
उदाहरण
आइए blur() मेथड का एक उदाहरण देखें -
<!DOCTYPE html> <html> <head> <style> a{ text-decoration:none; font-size:20px; } a:focus, a:active { color: red; text-decoration:underline; font-size:40px; } </style> </head> <body> <a id="Anchor" href="https://example.com">example.com</a> <p>Give focus or remove focus…</p> <input type="button" onclick="getfocus()" value="Get focus"> <input type="button" onclick="losefocus()" value="Lose focus"> <script> function getfocus() { document.getElementById("Anchor").focus(); } function losefocus() { document.getElementById("Anchor").blur(); } </script> </body> </html>
आउटपुट
यह निम्नलिखिक आउटपुट उत्पन्न करेगा -
“Get focus” पर क्लिक करने पर -
“Lose focus” पर क्लिक करने पर, यह मूल के समान होगा -
उपरोक्त उदाहरण में -
हमने पहले id “Anchor” और href=”https://www.example.com” के साथ एक एंकर टैग बनाया -
<a id="Anchor" href="https://example.com">example.com</a>
फिर हमने एंकर टैग के लिए दो स्टाइल्स परिभाषित किए हैं ताकि जब यह फोकस्ड और एक्टिव हो और जब यह न हो तो इसे अलग किया जा सके।
a{ text-decoration:none; font-size:20px; } a:focus, a:active { color: red; text-decoration:underline; font-size:40px; }
फिर हमने getfocus() और losefocus() फ़ंक्शन को क्रमशः निष्पादित करने के लिए “Get focus” और “Lose focus” नाम के दो बटन बनाए।
<input type="button" onclick="getfocus()" value="Get focus"> <input type="button" onclick="losefocus()" value="Lose focus">
getfocus() फ़ंक्शन इससे जुड़े “Anchor” id वाले एलिमेंट को प्राप्त करता है जो हमारे मामले में <anchor> एलिमेंट है। यह फिर इसकी focus मेथड को निष्पादित करता है जो लिंक्स को a:focus,a:active स्टाइल में बदल देगा यानी रंग लाल होगा, टेक्स्ट अंडरलाइन होगा और फ़ॉन्ट साइज़ 40px तक बढ़ जाएगा।
function getfocus() { document.getElementById("Anchor").focus(); }
losefocus() फ़ंक्शन इससे जुड़े “Anchor” id वाले एलिमेंट को प्राप्त करता है जो हमारे मामले में <anchor> एलिमेंट है। यह फिर इसके blur() मेथड को निष्पादित करता है ताकि उपरोक्त लिंक से फोकस हट जाए और लिंक स्टाइल को <a> एलिमेंट के लिए मूल स्टाइल में बदल दिया जाए।
function losefocus() { document.getElementById("Anchor").blur(); }
