কী-অপ, কী-ডাউন এবং কী-প্রেস ইভেন্ট (Keyup, Keydown & Keypress Event)
কী-অপ, কী-ডাউন এবং কী-প্রেস ইভেন্ট (Keyup, Keydown & Keypress Event)
কী-ডাউন(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.
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.
- keydown() এবং keyup() a = 65, A = 65 দেখাবে (lowercase এবং uppercase একই value দেখাবে)।
- 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
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 :
<html>
<head>
<script 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>
Comments
Post a Comment
Thanks