jQuery Keyboard Events | Lessoncup Programming Blog

Thursday, 17 March 2016

jQuery Keyboard Events

Hi, after long time i am started working on lessoncup , today i am going to tell you about what is jquery keyboard events and what is the usage of this and how we work on keyboard events, in jquery api we can find few keyboard events like keypress(), keyup(), and keydown(), before we know about keyboard events we must know about what is an event ? it is simple the webpage are responding to different visitors actions that is called events


and an event gives the moment when something happen, now lets see how to write the keyboard event syntax

jQuery keypress()

the keypress() event triggers when the user press the keyboard key and keypress() event will not trigger few keys like ( ALT, CTRL, SHIFT, ESC ) and this event only triggers focused elements, lets see the syntax of .keypress()

$(selector).keypress()

$(selector).keypress (function)


jQuery keyup()

the keyup() event triggers when the user release the keyboard key and you can attach it to the function also

$(selector).keyup()

$(selector).keyup (function)

jQuery keydown()

the keydown() and keypress() events both are same but the difference is quit if u press and hold the key the keydown() event it trigger ones but the keypress() event keep triggers until you release the key.

modifier keyboard keys will not trigger to keypress() event but will work to keydown() event

one more thing is if you want to capture the real pressed key use keypress() event because when you want to know the proper uppercase and lowercase key value the keydown() and keyup() events display same result like this  a=65, A=65 but when you use keypress() event its give the exact key value like a=97, A=65

$(selector).keydown()

$(selector).keydown (function)


Example


<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script>

$(document).ready(function(){
 
 $('#box').keyup(function(){
  
  $('#msg').html("The pressed KEYUP event code is "+event.keyCode);

  
 });
 
 $('#box').keydown(function(){
  
  $('#msg1').html("The pressed KEYDOWN event code is "+event.keyCode);

  
 });
 
 $('#box').keypress(function(){
  
  $('#msg2').html("The pressed KeyPRESS event code is "+event.keyCode);

  
 });
 
});

</script>


Live Demo  

2 comments :

  1. hi,

    I newly learning jquery and javascript, the thing is IN live demo, there is no result, i couldn't see. and in Console there is i got some reference error.

    ReplyDelete
    Replies
    1. Hi i checked and i didnt notice any error if u find can u please send the error msg thank you to visit

      Delete

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons