HTML DOM ফোকাস() পদ্ধতিটি একটি HTML উপাদানে ফোকাস দেওয়ার জন্য ব্যবহৃত হয়। সমস্ত HTML উপাদানে ফোকাস প্রয়োগ করা যাবে না। যেমন:আপনি একটি
ট্যাগ ফোকাস করতে পারবেন না। একটি উপাদান থেকে ফোকাস অপসারণ করতে blur() পদ্ধতি ব্যবহার করুন।
সিনট্যাক্স
নিম্নলিখিত সিনট্যাক্স −
HTMLElementObject.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() method example</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> আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবে
ফোকাস বোতামে ক্লিক করলে -
BLUR বোতামে ক্লিক করলে -
উপরের উদাহরণে -
আমরা প্রথমে "USR1" আইডি সহ একটি টেক্সট বক্স তৈরি করেছি এবং যথাক্রমে 5 এবং 10 এর সমান আকার এবং সর্বোচ্চ দৈর্ঘ্য সম্পত্তি মান।
<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() পদ্ধতি ব্যবহার করে "টেক্সট" টাইপ সহ ইনপুট উপাদান পায় এবং টেক্সটবক্সে ফোকাস সেট করতে এটির ফোকাস() পদ্ধতি সক্ষম করে যা আমাদের টেক্সটবক্সে আমাদের :ফোকাস শৈলী প্রয়োগ করে। disableFocus() পদ্ধতিটি "USR1" আইডি সহ ইনপুট উপাদান পায় এবং এটিতে ব্লার() পদ্ধতিকে কল করে যা টেক্সটবক্স থেকে ফোকাস সরিয়ে দেয় যা এটিতে আমাদের সাধারণ সিএসএস শৈলী প্রয়োগ করে অর্থাৎ এটি ডিফল্ট শৈলীতে ফিরে আসে -
function enableFocus() {
document.getElementById("USR1").focus();
}
function disableFocus() {
document.getElementById("USR1").blur();
} 