Keydown Event using JQUERY

When we press a key the keydown event occurs.
This event is triggered for all the keys ( including non-printing keys like Esc, Shift, arrow keys etc)

Here is the syntax
$("element").keydown(function(){
.....
})
Code to trigger Keydown event .
  • Video Tutorial on keyboard Events



<script>
$(document).ready(function() {
$(document).keydown(function(){
alert('hi');
});
})
</script>

Difference between keypress and keydown events ?

The keypress() event is not triggered by the non-printing keys like Esc, Shift key , Delete key etc , whereas all keys are tracked by keydown() event.
keydown() event is case insensitive
keypress() event is case sensitive
DEMO of difference between keypress and keydown Events
<script>
$(document).ready(function() {
//// keydown() ///
$(document).keydown(function(){
$('#d1').html('Keydown Event happened, keycode: '+ event.which);
$("#d1").show();
setTimeout(function() { $("#d1").fadeOut('slow'); }, 1000);
});
/////keypress() ///
$(document).keypress(function(){
$('#d2').html('Keypress Event happened, keycode: '+ event.which);
$("#d2").show();
setTimeout(function() { $("#d2").fadeOut('slow'); }, 1000);
});
///
});
</script>
HTML
 <div id=d1></div> <div id=d2></div>

Event Reference Keypress keyup()
DEMO of keyup Event DEMO of Hover on multiple elements
Mouse enter and mouse leave events Learn which key is pressed by user Application : Duration of holding the key

Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com



    Post your comments , suggestion , error , requirements etc here .







    Most Popular JQuery Scripts

    1

    Two dependant list boxes

    2

    Calendar with Date Selection

    3

    Data change by Slider

    4

    Show & Hide element


    JQuery Video Tutorials




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer