Friday 4 October 2013

How to write code for Jquery KeyPress, KeyDown, KeyUp Events with examples? What are the differences?


In this article I will explain How to write code for Jquery KeyPress, KeyDown, KeyUp Events with examples? What are the differences? 

KeyDown or KeyPress Events

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


$('#txtUsername').keydown(function() {
var name = $('# txtUsername').val();
alert(name);
});
$('# txtUsername').keypress(function() {
var name = $('# txtUsername').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

$('# txtUsername').keyup(function() {
var details = $('# txtUsername').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() {
$('# txtUsername').keydown(function() {
var name = $('# txtUsername').val();
alert(name);
});
$('# txtUsername').keypress(function() {
var name = $('# txtUsername').val();
alert(name);
});
$( txtUsername').keyup(function() {
var details = $( txtUsername').val();
alert(details);
});
});
</script>
</head>
<body>
<input type="text" id=" txtUsername'" />
<p><b>Keyup Event Example</b></p>
<input type="text" id=" txtUsername'" />
</body>
</html>


No comments:

Post a Comment