HTML DOM blur() পদ্ধতি

HTML DOM 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>

আউটপুট

এটি নিম্নলিখিত আউটপুট −

তৈরি করবে

HTML DOM blur() পদ্ধতি

"ফোকাস পান" -

-এ ক্লিক করলে

HTML DOM blur() পদ্ধতি

"ফোকাস হারান" ক্লিক করলে, এটি আসল −

এর মতোই হবে৷

HTML DOM blur() পদ্ধতি

উপরের উদাহরণে -

আমরা প্রথমে “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() এবং lossfocus() ফাংশন চালানোর জন্য দুটি বোতাম "Get ফোকাস" এবং "Lose ফোকাস" তৈরি করেছি।

<input type="button" onclick="getfocus()" value="Get focus">
<input type="button" onclick="losefocus()" value="Lose focus">

getfocus() ফাংশনটি এমন একটি উপাদান পায় যার সাথে যুক্ত "অ্যাঙ্কর" আইডি রয়েছে যা আমাদের ক্ষেত্রে উপাদান। এটি তারপর এটিকে ফোকাস পদ্ধতি কার্যকর করে যা a:focus,a:active শৈলীর লিঙ্কগুলিকে পরিবর্তন করবে। রঙ সবুজ হবে, পাঠ্য আন্ডারলাইন করা হবে এবং ফন্টের আকার 40px-এ বৃদ্ধি পাবে।

function getfocus() {
   document.getElementById("Anchor").focus();
}

লসফোকাস() ফাংশনটি এমন একটি উপাদান পায় যার সাথে যুক্ত "অ্যাঙ্কর" আইডি রয়েছে যা আমাদের ক্ষেত্রে উপাদান। তারপরে এটি উপরের লিঙ্ক থেকে ফোকাস আলগা করার জন্য তার blur() পদ্ধতিটি কার্যকর করে এবং উপাদানের জন্য লিঙ্ক শৈলীকে মূল শৈলীতে পরিবর্তন করে।

function losefocus() {
   document.getElementById("Anchor").blur();
}