যেক্যুয়েরী এর blur() ইভেন্ট বেশ জনপ্রিয় একটি ইভেন্ট। এই blur() ইভেন্ট ব্যবহার করে নিচে একটি ব্যাবহারিক উদাহরণ দেখুন। এখানে দেখুন, ফর্ম এর ইনপুট ফিল্ডটি নির্ধারণ করার সাথে ইনপুট ফিল্ডের চারপাশে নতুন বর্ডার প্রদর্শিত হয়।
Enter Your Nameআমরা ওয়েব পেজে যখন কোন ফর্ম পুরন করি অথবা কম্পিউটারে কোন সফটওয়্যার ব্যবহার করি, তখন কীবোর্ড থেকে "Tab" বাটন প্রেস করি বা মাউস ব্যবহার করে কোন ইনপুট ফিল্ড নির্ধারণ করি তখন, ঐ নির্ধারিত ইনপুট ফিল্ডের চারপাশে নতুন করে বর্ডার প্রদর্শন হয়। অর্থাৎ ফোকাসটি একটি অবজেক্ট থেকে অন্য অবজেক্ট এ স্থানান্তরিত হয়। এটাই হল blur ইভেন্ট।
নিচে যেক্যুয়েরী blue() ইভেন্ট ব্যবহার করার জন্য সিনট্যাক্স দেখুন।
$(selector).blur()
নিচের উদাহরণে কিছু যেক্যুয়েরী কোড দেখুন, যেখানে যেক্যুয়েরী এর blue() ইভেন্ট ব্যবহার করা হয়েছে।
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> <script> $(document).ready(function(){ $("input").blur(function(){ alert("This input field has lost its focus."); }); }); </script> </head> <body> Enter Your Name: <input type="text"> </body> </html>
নোট - blue() ইভেন্ট কেবল মাত্র এইচটিএমএল Form এলিমেন্ট এর জন্য প্রযোজ্য হয় অর্থাৎ বিভিন্ন ফর্ম এলিমেন্ট যেমন, <input>, <button> ইত্যাদি। বিভিন্ন ওয়েব ব্রাউজারের সংস্করণ অর্থাৎ version ভেদে এই ইভেন্ট format এর কিছু পরিবর্তন করতে হয়।
এখানে একটি ব্যাবহারিক উদাহরণ দেখুন, যেখানে Blur ইভেন্ট ব্যবহার করা হয়েছে।
ওপরের ব্যাবহারিক উদাহরণটি তৈরি করার জন্য নিচের কোড গুলো ব্যবহার করা হয়েছে।