HTML DOM focus() মেথড

HTML DOM focus() মেথড একটি HTML এলিমেন্টে ফোকাস দিতে ব্যবহৃত হয়। ফোকাস সব HTML এলিমেন্টে প্রয়োগ করা যায় না। উদাহরণস্বরূপ: <p> ট্যাগে ফোকাস দেয়া যায় না। এলিমেন্ট থেকে ফোকাস সরাতে blur() মেথড ব্যবহার করুন।

সিনট্যাক্স

সিনট্যাক্স:

HTMLElementObject.focus()

উদাহরণ

focus() মেথডের উদাহরণ:

<!DOCTYPE html> <html> <head> <style>    input[type=text]:focus, p:active {       color: blue;       font-size:35px;       background-color:lightpink;       border:2px solid blue;    }    input[type=text]{       color:black;       font-size:20px;    } </style> <script>    function enableFocus() {       document.getElementById("USR1").focus();    }    function disableFocus() {       document.getElementById("USR1").blur();    } </script> </head> <body> <h1>focus() মেথড উদাহরণ</h1> <label>USERNAME :<input id="USR1" type="text" size=5 maxlength=10></label> <br><br> <input type="button" onclick="enableFocus()" value="FOCUS"> <input type="button" onclick="disableFocus()" value="BLUR"> </body> </html>

আউটপুট

এটি নিচের আউটপুট তৈরি করবে:

FOCUS বাটনে ক্লিক করলে:

BLUR বাটনে ক্লিক করলে:

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

প্রথমে id “USR1”, size এবং maxlength প্রপার্টির মান যথাক্রমে ৫ এবং ১০ সেট করে একটি টেক্সট বক্স তৈরি করা হয়েছে।

<label>USERNAME :<input id="USR1" type="text" size=5 maxlength=10></label>

টেক্সটবক্স ফোকাসে থাকলে, এক্টিভ থাকলে এবং না থাকলে জন্য দুটি আলাদা CSS স্টাইল তৈরি করা হয়েছে:

input[type=text]:focus, input[type=text]:active {    color: blue;    font-size:35px;    background-color:lightpink;    border:2px solid blue; } input[type=text]{    color:black;    font-size:20px; }

তারপর FOCUS এবং BLUR দুটি বাটন তৈরি করা হয়েছে যা ইউজার ক্লিক করলে যথাক্রমে enableFocus() এবং disableFocus() মেথড এক্সিকিউট করবে:

<input type="button" onclick="enableFocus()" value="FOCUS"> <input type="button" onclick="disableFocus()" value="BLUR">

enableFocus() মেথড getElementById() মেথড ব্যবহার করে টাইপ “text” ইনপুট এলিমেন্ট পাওয়া এবং এর focus() মেথড ইনেবল করে টেক্সটবক্সে ফোকাস সেট করা যা আমাদের :focus স্টাইল টেক্সটবক্সে প্রয়োগ করে। disableFocus() মেথড id “USR1” ওয়ালা ইনপুট এলিমেন্ট পাওয়া এবং সেটার ওপর blur() মেথড কল করা যা টেক্সটবক্স থেকে ফোকাস সরিয়ে দেয় এবং আমাদের নরমাল CSS স্টাইল সেটি প্রয়োগ করে অর্থাৎ এটি ডিফল্ট স্টাইলে ফিরে আসে:

function enableFocus() {    document.getElementById("USR1").focus(); } function disableFocus() {    document.getElementById("USR1").blur(); }