কী-অপ, কী-ডাউন এবং কী-প্রেস ইভেন্ট

কী-অপ, কী-ডাউন এবং কী-প্রেস ইভেন্ট (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.

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

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>

Demo :

<< Previous Next >>

লেখকঃ ঢাকা প্রকৌশল ও প্রযুক্তি বিশ্ববিদ্যায়ের(DUET) কম্পিউটার সায়েন্স এ্যান্ড ইঞ্জিনিয়ারিং(CSE) বিভাগের ৪র্থ বর্ষের এক জন ছাত্র। তিনি ওয়েব ডিজাইন, ওয়েব ডেভলপমেন্ট এর বিভিন্ন বিষয় যেমন : এইচটিএমএল, সিএসএস, জাভাস্ক্রিপ্ট, জে কোয়েরি, পিএইচপি, .Net ইত্যাদি বিষয়ের উপর অভিজ্ঞ। তিনি ACM ICPC সহ বিভিন্ন আন্তর্জাতিক প্রোগ্রামিং প্রতিযোগীতায় অংশগ্রহন করেছেন। তাকে ফেসবুকে অনুসরন করতে এখানে ক্লিক করুন।