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://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; }
আমরা তারপর "Get focus" এবং "Lose focus" নামে দুটি বাটন তৈরি করেছি যারা যথাক্রমে getfocus() এবং losefocus() ফাংশন এক্সিকিউট করবে।
<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(); }
