JavaScript-এ টেক্সট বক্স সিলেক্ট করার পদ্ধতি

JavaScript-এ select() মেথড ব্যবহার করে ইনপুট ফিল্ডের টেক্সট প্রোগ্রামেটিক্যালি সিলেক্ট করা যায়। এটি ইউজার এক্সপেরিয়েন্স উন্নত করতে (যেমন: এক-ক্লিকে কপি) খুবই কাজে লাগে।

বেসিক সিনট্যাক্স

document.getElementById('inputId').select();

সম্পূর্ণ HTML উদাহরণ

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>টেক্সট বক্স সিলেক্ট</title>
</head>
<body>
    <label>আপনার নাম: </label>
    <input type="text" id="txtName" value="John">
    <br><br>
    <button type="button" onclick="selectTextBox()">টেক্সট বক্স সিলেক্ট করুন</button>

    <script>
        function selectTextBox() {
            document.getElementById("txtName").select();
            // বোনাস: কপি করার জন্য (মডার্ন ব্রাউজার)
            // document.execCommand('copy'); // ডিপ্রিকেটেড
            // navigator.clipboard.writeText(document.getElementById("txtName").value);
        }
    </script>
</body>
</html>

চলানোর পদ্ধতি

1. ফাইলটি selectDemo.html নামে সংরক্ষণ করুন।
2. VS Code-এ Open with Live Server দিয়ে চালান।
3. বাটনে ক্লিক করলে ইনপুট বক্সের টেক্সট হাইলাইট হবে।

আউটপুট

বাটনে ক্লিক করলে ইনপুট ফিল্ডের "John" টেক্সটটি নীল হাইলাইট দিয়ে সিলেক্টেড অবস্থায় আসবে।

অতিরিক্ত টিপস

• ফোকাস+sিলেক্ট: element.focus(); element.select();
• সিলেকশন রেঞ্জ: element.setSelectionRange(start, end) দিয়ে আংশিক সিলেকশন।
• ক্লিপবোর্ডে কপি: মডার্ন API: navigator.clipboard.writeText(text)

ব্যবহার ক্ষেত্র

• রেফারেল কোড/কুপন কোড ফিল্ডে এক-ক্লিক কপি।
• ফর্ম ভ্যালিডেশন এরর হলে সমস্যায় ফিল্ড হাইলাইট।
• জেনারেট করা পাসওয়ার্ড/টোকেন সহজে কপি করার জন্য।