ফোকাস এবং চেঞ্জ ইভেন্ট (Focus & Change Event) : জে-কোয়েরী -(পর্ব-২৫)

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

পূর্বের পর্বে আমরা দেখেছি যে, যখন কোন Element Focus হারায় তখন blur event সংগঠিত হয়। একই ভাবে যখন কোন Element Focus পায় তখন Focus Event সংগঠিত হয় (Fire when an element is on focus or gain focus )। Focus এবং Bluer event কে একটি অপরটির বিপরীত event বলা যেতে পারে। এটি Form element (<input> , <select> etc) এবং link (<a href >) এর ক্ষেত্রে প্রযোজ্য।

Example :

[sourcecode language=”html”]
<!DOCTYPE html>
<html>
<head>
<style>span {display:none;}</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p><input type="text" /> <span>focus fire</span></p>

<p><input type="password" /> <span>focus fire</span></p>
<script>
$("input").focus(function () {
$(this).next("span").css(‘display’,’inline’).fadeOut(1000);
});
</script>

</body>
</html>
[/sourcecode]

Click Me to Show Demo

চেঞ্জ ইভেন্ট : যখন কোন element এর value পরিবর্তন হয় তখন change event সংঘঠিত হয় (Fire when an element value is changed )। ধরুন একটি TextBox এ কিছু text আছে, আপনি তা BackSpace চেপে delete করছেন অর্থাৎ TextBox এর value পরিবর্তন করছেন। অথবা নতুন কোন text TextBox এ লিখছেন ঠিক তখনই ঐ TextBox টির change event সংঘঠিত হবে।

ListBox এর কথা ধরুন, যখন list এর কোন একটি item select করবেন তখন এর value ও পরিবর্তন হবে; ঠিক তকনই ListBox এর change event সংঘঠিত হবে।

Example :

[sourcecode language=”html”]
<!DOCTYPE html>
<html>
<head>
<style>

div { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<select name="sweets" multiple="multiple">
<option>Chocolate</option>
<option selected="selected">Candy</option>

<option>Taffy</option>
<option selected="selected">Caramel</option>
<option>Fudge</option>
<option>Cookie</option>

</select>
<div></div>
<script>
$("select").change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$("div").text(str);
})
.change();
</script>

</body>
</html>
[/sourcecode]

Click Me to Show Demo

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

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

1 thought on “ফোকাস এবং চেঞ্জ ইভেন্ট (Focus & Change Event) : জে-কোয়েরী -(পর্ব-২৫)”

Leave a Comment