Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery KeyPress KeyDown KeyUp Events Examples & Differences

Sep 15, 2013
Introduction:

Here I will explain
jQuery keydown, keyup and keypress events examples or differences between keydown, keyup and keypress events in jQuery.
Description:
  
In previous articles I explained jQuery merge multiple tables into single table, jQuery check if string contains specific word,
jQuery Show Hover Dropdown Menu, Simple jQuery modal popup example, jQuery show YouTube videos in popup window and many articles relating to JQuery, JavaScript. Now I will explain difference between keydown, keyup and keypress events examples in jQuery.

KeyDown or KeyPress Events

Here KeyDown or KeyPress both the events are same both will rise whenever we click any button for that we need to write the code like as shown below


$('#txtname').keydown(function() {
var name = $('#txtname').val();
alert(name);
});
$('#txtname').keypress(function() {
var name = $('#txtname').val();
alert(name);
});
Keyup Events

Keyup event will rise whenever we click any button and released for that we need to write the code like as shown below


$('#txtdetails').keyup(function() {
var details = $('#txtdetails').val();
alert(details);
});
If you want to check it in complete example write the code like as shown below

<html>
<head>
<title>jQuery Keyup Keydown and keypress events Examples </title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function() {
$('#txtname').keydown(function() {
var name = $('#txtname').val();
alert(name);
});
$('#txtname').keypress(function() {
var name = $('#txtname').val();
alert(name);
});
$('txtdetails').keyup(function() {
var details = $('txtdetails').val();
alert(details);
});
});
</script>
</head>
<body>
<p><b>Keydown or Keypress Events Example</b></p>
<input type="text" id="txtname" />
<p><b>Keyup Event Example</b></p>
<input type="text" id="txtdetails" />
</body>
</html>
Live Demo

For live demo check below example

Keydown or Keypress Events Example

Keyup Event Example

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

4 comments :

sanju said...

Very nice article. Now I came to know the exact difference. Thank u :)

Unknown said...

few diff betwn keypress and keydown :-

1.keydown event detects special keys like CTRL,ALT,ESC etc. but keypress won't.
2. keydown is case insenitive i.e it considers ASCII code of a =65 and A = 65.
While keypress considers A=65, a=97.

Unknown said...

Hai suresh brother. I am a Beginner. But i found very small mistake in this code.
$('txtdetails').keyup(function() ----> Before write Id name should be use #.
its not a big mistake.. But am a Beginner So, Please avoid that kind of mistake.

otr said...
This comment has been removed by a blog administrator.

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.