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

HTML onsearch ইভেন্ট এট্রিবিউট


ভূমিকা

HTML onsearch ইভেন্ট এট্রিবিউট ট্রিগার হয় যখন একজন ব্যবহারকারী একটি HTML ডকুমেন্টে type="search" 가진 একটি HTML ইনপুট এলিমেন্টে "Enter" কী চাপায়।

সিনট্যাক্স

নিচে সিনট্যাক্স দেওয়া হলো:

<input type="search" onsearch="script">

HTML onsearch ইভেন্ট এট্রিবিউটের একটি উদাহরণ দেখা যাক:

উদাহরণ

<!DOCTYPE html> <html> <head> <style>    body {       color: #000;       height: 100vh;       background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;       text-align: center;       padding: 20px;    }    input {       border: 2px solid #fff;       background: transparent;       height: 2rem;       padding: 10px;       width: 200px;    }    ::placeholder {       color: #000;    }    .show {       font-size: 1.5rem;       font-weight: bold;    } </style> </head> <body> <h1>HTML onsearch Event Attribute Demo</h1> <input type="search" onsearch="searchFn()" placeholder="Search here"> <p>আপনি যা খুঁজছেন তা লিখুন এবং তারপর "Enter" কী চাপুন</p> <div class="show"></div> <script>    function searchFn() {       document.body.style.background = "linear-gradient(45deg, #8BC6EC 0%, #9599E2 100%) no-repeat";       document.querySelector(".show").innerHTML = "You search: " + document.querySelector("input").value;    } </script> </body> </html>

আউটপুট

HTML onsearch ইভেন্ট এট্রিবিউট

সার্চ ফিল্ডে আপনার সার্চ টেক্সট লিখুন এবং তারপর "Enter" কী চাপুন onsearch ইভেন্ট এট্রিবিউট কীভাবে কাজ করে তা देखने के लिए।

HTML onsearch ইভেন্ট এট্রিবিউট

  1. HTML ondragstart ইভেন্ট অ্যাট্রিবিউট

  2. HTML ondrop ইভেন্ট অ্যাট্রিবিউট

  3. HTML ondragleave ইভেন্ট অ্যাট্রিবিউট

  4. HTML ondragenter ইভেন্ট অ্যাট্রিবিউট