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

জাভাস্ক্রিপ্টে HTML সার্চ বক্সে ডিফল্ট সার্চ টেক্সট যোগ করার পদ্ধতি


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

উদাহরণ

<!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> <input type="text" id="textSearch" placeholder="Search the value" /> <script>    var yourText= "John";    var textBoxSearch = document.getElementById("textSearch");    textBoxSearch.value = yourText;    textBoxSearch.onfocus = function() {       if (this.value == yourText) {          this.value = '';       }    } </script> </body> </html>

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

আউটপুট

জাভাস্ক্রিপ্টে HTML সার্চ বক্সে ডিফল্ট সার্চ টেক্সট যোগ করার পদ্ধতি

সার্চ বক্সে ক্লিক করলে প্লেসহোল্ডার ভ্যালু দেখাবে। স্ন্যাপশট নিচে দেওয়া হলো −

জাভাস্ক্রিপ্টে HTML সার্চ বক্সে ডিফল্ট সার্চ টেক্সট যোগ করার পদ্ধতি

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

  2. জাভাস্ক্রিপ্টে <strong> ট্যাগে টেক্সট সেট করা

  3. জাভাস্ক্রিপ্টে innerHTML সেট করুন

  4. জাভাস্ক্রিপ্টে টেক্সটবক্সের মান দেখানো