JQuery keydown() Event
The keydown event occurs when user presses a key on the keyboard. Whenever a key is pressed down, the keydown() method attaches event handler to the keydown JavaScript event or triggers that event on an element. The keydown event is sent to an element when user presses a key on the keyboard. It can be attached to any element, but the event is only sent to the element that has the focus. By pressing some keys which will trigger only keydown event such as Shift, Ctrl, Alt, Insert, Home, Page Up, Delete, End, Page Down, and Caps Lock.
JQuery keydown() Syntax
$(selector).keydown (function)
It binds a function to keydown event.
Or
$(selector).keydown ()
It triggers the keydown event for selected elements.
It has parameter called function which is optional parameter defines function to run when event occurs or function executes when the event is triggered.
JQuery keypress() Event
The keypress event occurs when user presses a key on the keyboard. It is used to count number of key presses in the output field. It is quite similar to keydown element and occurs when a button is pressed down. Whenever a key is pressed, the keypress() method binds function to an event on an element. This method is used to perform any action or run a function as keypress event occurs in your web document. The keypress event returns different values for lowercase and uppercase letters. So it is useful when you have to differentiate between lowercase and uppercase. The keypress event is not fired for all keys such as Shift, Ctrl, Alt, Insert, Home, Page Up, Delete, End, Page Down, and Caps Lock.
JQuery Keypress() Syntax
$(selector).keypress (function)
It binds a function to keypress event.
Or
$(selector).keypress ()
It triggers the keypress event for selected elements.
It has parameter called function which is optional parameter defines function to run when event occurs or function executes when the event is triggered.
JQuery Keydown() and Keypress() Example
<!DOCTYPE html>
<head>
<title>Keydown and Keypress Events</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Keydown and Keypress Events Example</h2>
<script type="text/javascript">
var kdown = 0;
var kpress = 0;
$(document).ready(function() {
$("#textbox").keydown(function(event) {
$("#kdown").html(++kdown);
});
$("#textbox").keypress(function(event) {
$("#kpress").html(++kpress);
});
});
</script>
<body>
Enter text:<input id="textbox" type="text">
<p>keydown() event:<span id="kdown">0</span>times</p>
<p>keypress() event:<span id="kpress">0</span>times</p>
</body>
</html>
- As shown in the above program, we have used the code inside $(document).ready which is an event which fires up when document is ready. It will run once the page document object model is ready for JavaScript code to execute.
- $(“#textbox”).keydown(function(event)) line determines that event occurs when user presses a key on the keyboard which refers to id of textbox i.e. #textbox and $(“#textbox”).keypress(function(event) ) determines that event occurs when user presses a key on the keyboard and this is also refers to id of textbox i.e. #textbox.
- $(“#kdown”).html(++kdown); and $(“#kpress”).html(++kpress); both lines increases number of key pressed counts which are pressed by on the keyboard.
- we have used span tag to group inline elements in a document.
When you run the above example, you would get the following output:
JQuery Keyup() Event
This event occurs when key is released in the keyboard. Whenever a key is triggered, the keyup() method binds function to an event on an element. This method is used to perform any action or run a function as keypress event occurs in your web document. The keyup event returns different values for lowercase and uppercase letters.
JQuery Keyup() Syntax
$(selector).keyup (function)
It binds a function to keyup event.
Or
$(selector).keyup ()
It triggers the keyup event for selected elements.
It has parameter called function which is optional parameter defines function to run when event occurs or function executes when the event is triggered.
JQuery Keyup() Example
<!DOCTYPE html>
<head>
<title>Keypress Event</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Keydown and Keypress Events Example</h2>
<script type="text/javascript">
$(document).ready(function() {
$("input").keyup(function() {
alert("keyup event occured!");
});
});
</script>
<body>
Enter text: <input type="text">
</body>
</html>
- As shown in the above program, we have used the code inside $(document).ready which is an event which fires up when document is ready. It will run once the page document object model is ready for JavaScript code to execute.
- $(“input”).keyup(function()) line specifies the event which will occur when key is released in the keyboard .
- When user enter something in the text box, alert box will display with specified message.
When you run the above example, you would get the following output:
JQuery Select Event Example