Introduction:
Here I will explain jQuery keydown, keyup and keypress events examples or differences between keydown, keyup and keypress events in jQuery.
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.
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 Email
|
|||
4 comments :
Very nice article. Now I came to know the exact difference. Thank u :)
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.
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.
Note: Only a member of this blog may post a comment.