কী-অপ, কী-ডাউন এবং কী-প্রেস ইভেন্ট (Keyup, Keydown & Keypress Event) : জে-কোয়েরী -(পর্ব-২৮)

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

কী-ডাউন(KeyDown) ইভেন্ট : যখন keyboard এ কোন key press করা হয়, তখন KeyDown Event সংগঠিত হয় (Occurs when key is pressed)।
কী-প্রেস(KeyPress) ইভেন্ট : যখন কোন key press করে ছেড়ে দেয়া হয়, তখন KeyPress Event সংগঠিত হয় (Occurs when key is pressed and released)।
কী-অপ(KeyUp) ইভেন্ট : যখন কোন key ছেড়ে দেয়া হয়, তখন KeyUp Event সংগঠিত হয় (Occurs when key is released)I

কিছু গুরুত্বপূর্ন point যা application development এর জন্য গুরুত্বপূর্ন:

Repeat keys : যখন KeyBoard এর কোন Key চেপে ধরে রাখা হবে, তখন keydown() event সংগঠিত হতে থাকবে কিন্তু keypress() event টি triggering এর জন্য অপেক্ষা করতে থাকবে যতক্ষন পর্যন্ত না Key টি release করা হবে।

Modifier keys : Keyboard modifier key গুলি (ctrl, shift, alt…) keydown() event এ trigger হয়, keypress() event এ নয়।
KeyCode – ASCII code : A = 65 and a= 97 Please refer to this ASCII table charts.

  1. keydown() এবং keyup() a = 65, A = 65 দেখাবে (lowercase এবং uppercase একই value দেখাবে)।
  2. keypresss() a= 97, A=65 দেখাবে (lowercase এবং uppercase ভিন্ন ভিন্ন value দেখাবে)।

তাই original character key পেতে keypress() event ব্যবহার করতে হবে।
KeyCode is not display in FireFox? : event.keyCode FireFox এ কাজ করে না কিন্তু Internet Explorer এ কাজ করে। তাই FireFox এ event.keyCode এর পরিবর্তে event.which use করতে হবে। So the better way should be 

var keycode = (event.keyCode ? event.keyCode : event.which);

Example :

[sourcecode language=”html”]
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
span{
padding:8px;
margin:8px;
color:blue;
}
div{
padding:8px;
margin:8px;
}
</style>
</head>
<body>
<h1>jQuery keyup(), keydown() and keypress() example</h1>
<label>TextBox : </label>
<input id="textbox" type="text" size="50" />

<div>
<label>1. keyup() Message :</label> <span id="msg-keyup"></span>
</div>

<div>
<label>2. keydown() Message :</label><span id="msg-keydown"></span>
</div>

<div>
<label>3. keypress() Message :</label><span id="msg-keypress"></span>
</div>

<script type="text/javascript">

$(‘#textbox’).keyup(function(event){
$(‘#msg-keyup’).html(‘keyup() is triggered!, keyCode = ‘
+ event.keyCode + ‘ which = ‘ + event.which)
});

$(‘#textbox’).keydown(function(event){
$(‘#msg-keydown’).html(‘keydown() is triggered!, keyCode = ‘
+ event.keyCode + ‘ which = ‘ + event.which)
});

$(‘#textbox’).keypress(function(event){
$(‘#msg-keypress’).html(‘keypress() is triggered!, keyCode = ‘
+ event.keyCode + ‘ which = ‘ + event.which)
});

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

Try Demo

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

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

1 thought on “কী-অপ, কী-ডাউন এবং কী-প্রেস ইভেন্ট (Keyup, Keydown & Keypress Event) : জে-কোয়েরী -(পর্ব-২৮)”

Leave a Comment