HTML DOM Input Checkbox autofocus প্রপার্টি

HTML DOM Input Checkbox autofocus প্রপার্টি একটি চেকবক্স ইনপুট এলিমেন্টের autofocus অ্যাট্রিবিউটের মান পাওয়া ও সেট করার জন্য ব্যবহৃত হয়। এটি নির্দেশ করে যে পেজ লোড হলে চেকবক্সটি অটোমেটিক্যালি ফোকাস পাবে কিনা।

সিনট্যাক্স

মান পাওয়া:

object.autofocus

মান সেট করা:

object.autofocus = true | false

উদাহরণ: Autofocus ব্যবহার ও ডাইনামিক্যালি পরিবর্তন

<!DOCTYPE html>
<html>
<head>
    <title>HTML DOM autofocus property</title>
    <style>
        body { text-align: center; }
        p { font-size: 1.5rem; color: #ff8741; }
        input { width: 30px; height: 30px; outline: 2px solid #db133a; }
        button {
            background-color: #db133a; color: #fff; padding: 8px;
            border: none; width: 120px; margin: 0.5rem;
            border-radius: 50px; outline: none;
        }
    </style>
</head>
<body>
    <h1>autofocus Property Example</h1>
    <p>Do you need help?</p>
    <input type="checkbox" autofocus> <br>
    <button onclick="disableFocus()">Disable Autofocus</button>

    <script>
        function disableFocus() {
            document.querySelector("input").autofocus = false;
        }
    </script>
</body>
</html>

আউটপুট

পেজ লোড হলে চেকবক্সটি অটোমেটিক্যালি ফোকাস পাবে (লাল আউটলাইন দেখাবে)। "Disable Autofocus" বাটনে ক্লিক করলে পরবর্তী রিলোডে ফোকাস পাবে না।

নোট

• একটি পেজে শুধু একটি এলিমেন্টে autofocus থাকা উচিত।
• মোবাইল ব্রাউজারগুলোতে autofocus প্রায়শই কাজ করে না (ইউজার অভিজ্ঞতার জন্য)।
• এটি একটি বুলিয়ান অ্যাট্রিবিউট: উপস্থিত থাকলে true, অনুপস্থিত থাকলে false।