Updated March 20, 2023
Introduction to jQuery Keypress()
jQuery keypress() method is an event-handling method. It is used either to trigger a keypress javascript event or to attach a function to be executed on the selected element on the occurrence of a keypress event that is when a keyboard button is pressed down. In another way, it can also be used to detect whether any key is pressed or not.
Syntax:
| Syntax | Parameter description | Value Type | Version |
| $(selector).keypress() | NA | NA | 1.0 |
| $(selector).keypress(Handler/function) | 1.Handler: Accepts the function name which will be executed, each time the event is triggered. | 1.Handler-Function(event object) | 1.0 |
| $(selector).keypress([event data],handler) | 1.eventData:
The object containing data which will be passed to the handler 2.Handler: (Described previously)
|
1.eventData: Any
2.Handler: Function (event object) |
1.4.3 |
jQuery Keypress() without using any parameter
keypress() method can be used without providing any input argument. It is used where an event is defined to be triggered manually.
The below example demonstrates the functionality of the printing number of times the button is clicked. The count is updated only when the button is clicked.
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
i = 0;
$(document).ready(function(){
$("p").keypress(function(){
$("span").text(i += 1);
});
$("button").click(function(){
$("p").keypress();
});
});
</script>
</head>
<body style="background-color: beige;">
<h3 style="font-family: Arial, Helvetica, sans-serif;">Use of keypress() method without any argument</h3>
<p style="font-family: Arial, Helvetica, sans-serif;">Number of times the button is pressed: <span>0</span></p>
<button>Click here</button>
</body>
</html>Output:
Before the keypress() method is called:
After the keypress() method is called:
Screen 1: The button ‘Click here’ is clicked only once.
Screen 2: The button ‘Click here’ is clicked twice.
Screen 3: The button ‘Click here’ is clicked thrice.
And so on.
With ‘Handler/Function’ parameter
For jQuery keypress(), a function or handler name can be passed as an input argument. The function will be called on the trigger of any keypress event on the selected html element.
In the below code snippet, the keypress() method is used with the input handler input parameter. This handler is called each time, when, any key is pressed.
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
i = 0;
$(document).ready(function(){
$("input").keypress(function(){
$("span").text(i += 1);
});
});
</script>
</head>
<body style="background-color: beige;">
<h3 style="font-family: Arial, Helvetica, sans-serif;">Use of keypress() method 'handler/function' parameter</h3>
<h4 style="font-family: Arial, Helvetica, sans-serif;">Tell about yourself: <input style="width:500px;" type="text"></h4>
<p style="font-family: Arial, Helvetica, sans-serif;">Number of characters Entered: <span>0</span></p>
</body>
</html>Output:
Before the keypress() method is called:
After the keypress() method is called:
Screen 1: The total number of keys pressed is 5.
Screen 2: The total number of keys pressed is 12.
keypress() With ‘eventdata’ and ‘handler’ parameter
This type is used to bind an event handler to the keypress event where the input value to the handler is given in terms of ‘event data’ as a keypress method argument.
In the below code snippet, value for ‘param 1’ is given as event data value which is passed to the handler function through the ‘event’ object. The function counts the number of keys pressed and the string defined as ‘param1’ gets appended on the resultant output.
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
i = 0;
$(document).ready(function(){
$("input").keypress({param1:'keys are pressed.'},function(event){
$("span").text((i+=1)+event.data.param1);
});
});
</script>
</head>
<body style="background-color: beige;">
<h3 style="font-family: Arial, Helvetica, sans-serif;">Use of keypress() method 'eventdata' and 'handler/function' parameter</h3>
<h4 style="font-family: Arial, Helvetica, sans-serif;">Type here: <input type="text"></h4>
<p>Output:<span>0</span></p>
</body>
</html>Output:
Before the keypress() method is called:
After the keypress() method is called:
Screen 1: The number of key pressing is 19. The resultant message is being displayed after getting merged with the event data which is a string value: ‘keys are pressed’.
Screen 2: The number of key pressing is 9. The resultant message is being displayed after getting merged with the event data which is a string value: ‘keys are pressed’.
Using the keypress() method to detect keypress event
The keypress method with handler parameter can also be used to detect a keypress event i.e. it will trigger the handler once any key is pressed.
The below example demonstrates the usage of the keypress() method in detecting the event when any key is pressed.
Example:
<html>
<head>
<title>Jquery | Keypress() </title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
</head>
<script>
$(document).keypress(function(event){
alert('You pressed a key');
});
</script>
<body style="background-color: beige;">
<h3 style="font-family: Arial, Helvetica, sans-serif;">Use of keypress() method to detect a keypress event</h3>
<h4 style="font-family: Arial, Helvetica, sans-serif;">Press any key...</h4>
</script>
</body>
</html>Output:
Before the keypress() method is called:
After the keypress() method is called:
Once you press any key, the handler is being called and a pop-up window came up, displaying the configured alert message.
1. keypress() with input parameter (either with handler or handler and event data both), is a shortcut for .on( “keypress”, handler ).
2. It can execute on all the keys in keyboard except special characters or non-printing keys such as CTRL, ESC, SHIFT, Delete, etc.
Additional Note
- The actual behavior of the method may differ across different platforms, different versions for the platforms, browsers, etc., as it is not included as specifications officially.
- The event gets triggered only to the element which is on focus. Thus this method works effectively on form controls as they can be on focus always whereas focus for other elements is browser dependent.
- This method does not support the keys: ALT, CTRL, SHIFT, and ESC.
- It is similar to the ‘keydown’ event but differs from keydown event in case of modifier or non-printing keys, which support the keydown event but do not support keypress event.
- The behavior needs to be attached with a document object in case of the code requiring the value of the key pressed to be captured.
- Though browsers use different properties to store the information regarding the value of the key that is pressed, jQuery has the feature to normalize the property of the event object in order to retrieve the code value, which is nothing but the Unicode value for the key (except special keys).
- In order to capture keystrokes for special keys which do not carry any value, keydown() or keyup() needs to be used.
Recommended Articles
This is a guide to jQuery Keypress(). Here we discuss the basic concept, jQuery Keypress() using with or without parameter along with the syntax and examples. You may also look at the following article to learn more –
