keypress Event using JQUERY

When we press a key the keypress event occurs.
This event is triggered for printing keyes only ( excluding non-printing keys like Esc, Shift, arrow keys etc)

Here is the syntax
$("element").keypress(function(){
.....
})

  • Video Tutorial on keyboard Events


Code to trigger keypress event .

<script>
$(document).ready(function() {
$(document).keypress(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 Keydown() keyup()
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


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-2020 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer