ফোকাস-ইন এবং ফোকাস-আউট ইভেন্ট (Focusin and Focusout Event) :
যখন কোন element focus পায় (get focus) তখন focusin event সংগঠিত হয়। যখন selected element এর child element focus পায়, তখন focusin() methode কোন function কে call করতে পারে।
Syntax : $(selector).focusin(function(){})
focusout event টি focusin event এর ঠিক বিপরীত; যখন কোন element focus হারায় (losses focus) তখন focusout event সংগঠিত হয়। যখন selected element এর child element focus হারায়, তখন focusout() methode কোন function কে call করতে পারে। এটি bluer() methode এর মত কাজ করে।
Syntax : $(selector).focusout(function(){})
Example :
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").focusin(function(){
$(this).css("background-color","#FFFFCC");
});
$("div").focusout(function(){
$(this).css("background-color","#FFFFFF");
});
});
</script>
</head>
<body>
<div style="border: 1px solid black;padding:10px;">
First name: <input type="text" /><br />
Last name: <input type="text" />
</div>
<p>Click outside the div to lose focus (blur).</p>
</body>
</html>
Demo :
লক্ষ্য করুন যখন TextBox এ focus in করে তখন div element টির background color হলুদ, আবার যখন focus loss করে তখন div element টির background color সাদা হচ্ছে।
লেখকঃ ঢাকা প্রকৌশল ও প্রযুক্তি বিশ্ববিদ্যায়ের(DUET) কম্পিউটার সায়েন্স এ্যান্ড ইঞ্জিনিয়ারিং(CSE) বিভাগের ৪র্থ বর্ষের এক জন ছাত্র। তিনি ওয়েব ডিজাইন, ওয়েব ডেভলপমেন্ট এর বিভিন্ন বিষয় যেমন : এইচটিএমএল, সিএসএস, জাভাস্ক্রিপ্ট, জে কোয়েরি, পিএইচপি, .Net ইত্যাদি বিষয়ের উপর অভিজ্ঞ। তিনি ACM ICPC সহ বিভিন্ন আন্তর্জাতিক প্রোগ্রামিং প্রতিযোগীতায় অংশগ্রহন করেছেন। তাকে ফেসবুকে অনুসরন করতে এখানে ক্লিক করুন।