কম্পিউটার টিউটোরিয়াল

জাভাস্ক্রিপ্টে div class ব্যবহার করে নির্দিষ্ট এলিমেন্টে ফোকাস করার পদ্ধতি


আপনি focus() কনসেপ্ট ব্যবহার করতে পারেন। জাভাস্ক্রিপ্ট কোড নিচে দেওয়া হলো −

উদাহরণ

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> </head> <body> <span class="TEXT_FOCUS" tabindex="-1"><center>TEXT BOX FOR FOCUS</center></span><br> <button id="focusButton">click me to get the tab on focus</button> <script>    document.getElementById('focusButton').addEventListener('click', function() {       document.querySelectorAll('.TEXT_FOCUS')[0].focus();    }); </script> </body> </html>

উপরোক্ত প্রোগ্রাম চালাতে, ফাইলের নাম anyName.html(index.html) হিসেবে সেভ করুন এবং ফাইলে রাইট-ক্লিক করে VS Code এডিটরে "Open with Live Server" অপশন সিলেক্ট করুন।

আউটপুট

জাভাস্ক্রিপ্টে div class ব্যবহার করে নির্দিষ্ট এলিমেন্টে ফোকাস করার পদ্ধতি

যখন আপনি বাটনে ক্লিক করবেন, নির্দিষ্ট এলিমেন্টে ফোকাস হবে। স্ন্যাপশট নিচে দেওয়া হলো −

জাভাস্ক্রিপ্টে div class ব্যবহার করে নির্দিষ্ট এলিমেন্টে ফোকাস করার পদ্ধতি

  1. JavaScript-এ HTML div এলিমেন্টকে টেক্সট এলিমেন্টে রিপ্লেস করার পদ্ধতি

  2. জাভাস্ক্রিপ্টে নির্বাচিত ডিভে টগল হাইড ক্লাস লাগানো

  3. জাভাস্ক্রিপ্টে ID দিয়ে এলিমেন্ট রিমুভ করা

  4. জাভাস্ক্রিপ্টে HTML টেবিলের প্রতিটি এলিমেন্টে IF শর্ত প্রয়োগ করা