ব্লুয়ার ইভেন্ট (Blur Event) : জে-কোয়েরী -(পর্ব-২৪)

Leave a Comment / জে-কোয়েরী (jQuery) / By

আমরা যারা বিভিন্ন software এ কাজ করেছি তারা সবাই হয়ত লক্ষ্য করেছি যে tab key press করার সাথে সাথে Focus এক object থেকে অন্য object এ move করে। এক object থেকে Focus যখন অন্য object এ move করে তখন যে event টি সংঘঠিত হয় তাকে blur event বলে। অর্থাৎ যখন কোন element তার focus loss করে তখন blur event সংঘঠিত হয় (Fire when an element is loses focus)। .blur() method টি .bind(‘blur’, handler) এর সংক্ষিপ্ত রুপ। .bind() নিয়ে পরবর্তীকে আলোচনা করা হবে।

সীমাবদ্ধতা :

  • এই ইভেন্টটি শুধু মাত্র Form element এর জন্য প্রযোজ্য। যেমন : <input>, <button> ইত্যাদি।
  • এটি internet explorer supported নয়।
  • version ভেদে -এর format এর কিছু পরিবর্তন রয়েছে।

Example :

[sourcecode language=”html”]
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").focus(function(){
$("input").css("background-color","#FFFFCC");
});
$("input").blur(function(){
$("input").css("background-color","#D6D6FF");
});
});
</script>
</head>
<body>
Enter your name: <input type="text" />
<p>Click in the input field to get focus, and outside the
input field to lose focus (blur).</p>
</body>
</html>
[/sourcecode]

ফলাফল(output):

TextBox এ click করার পূর্বে :
Selector Example

Focus TextBox এ থাকা অবস্থায় :
Selector Example

Focus TextBox থেকে চলে যাওয়ার পর :
Selector Example

………………………………………………………………………………
আলোকিত একটা সুন্দর সমৃদ্ধ পৃথিবী আমাদের প্রত্যেকেরই স্বপ্ন । আসুন আমাদের মেধা পরিশ্রম কে বিজ্ঞান সম্মতভাবে ব্যবহার করে, আমাদের স্বপ্ন পূরণে অংশ গ্রহণ করি। আজ এখানেই শেষ করলাম। “HAVE A GOOD PROGRAMMING”

জে-কোয়েরী ধারাবাহিক টিউটোরিয়ালঃ

Leave a Comment