- jQuery 2.0 Development Cookbook
- Leon Revill
- 515字
- 2021-07-16 12:25:32
Detecting key press events on inputs
jQuery provides three event functions that allow the jQuery developer to determine what key a user is pressing, and when and how the user is pressing it. The .keyup() function is an event handler that can be attached to an input and will be fired once the pressed key has been fully released; likewise, .keydown()will be fired once the key has been fully pressed. The third available event handler is .keypress(), which is fired instantly when a key is pressed.
These methods allow the developer to provide powerful client-side validation or to provide the user with simple features such as triggering a form submission when the Enter key is pressed.
Getting ready
Create a blank HTML file named recipe-5.html which we can use for this recipe.
How to do it…
Use a variety of event handlers to detect user key press events by performing the following steps:
- Add the following HTML code to the web page you have just created. Update the reference to the jQuery library to ensure that the latest version is being referenced into the web page. This HTML creates a simple page that has an input and an unordered list element, which we can use to output some event information in order to illustrate what each part of our jQuery code is achieving.
<!DOCTYPE html> <html> <head> <title>Chapter 2 :: jQuery Events</title> <script src="jquery.min.js"></script> <script> </script> </head> <body> <input type="text" class="myInput" /> <ul id="myList"></ul> </body> </html> - Within the script tags, add the following JavaScript code to attach both the
keyupandkeydownevent handlers:$(function(){ $('.myInput').keyup(function(){ $('#myList').append("<li>Key up!</li>"); }); $('.myInput').keydown(function(event){ $('#myList').append("<li>Key down!</li>"); if (event.which == 13) { $('#myList').append("<li>Enter key pressed!</li>"); } }); });
How it works…
We can attach both the keyup and keydown event handlers by first selecting our .myInput element and then specifying one of the event handler functions as shown in the following code:
$('.myInput').keydown();
We have added an event variable as an argument to the callback function on the keydown event. From this event variable, we can detect which key has been pressed using event.which. This is often useful as we can determine whether the key that the user has just pressed down is the Enter key, which we would be likely to want to perform a specific action on, such as for form submission or when we want to trigger an AJAX call. In this example, we simply append a list item to our #myList unordered list to illustrate the concept.
We replicate this procedure within our keyup event handler and use the .append() function to append a new DOM element into the list.
Once you load this web page in a browser and enter text in the input box, you will be able to see the events trigger as the list element updates on every key press. You will be able to see something similar to the following screenshot:
There's more…
This recipe provides two examples with keydown and keyup. Try experimenting with the code, and use the alternative keypress() function in the same way to see how it works.
See also
- Detecting button clicks
- Detecting element clicks
- Restricting input character length
- Detecting change
- Unity 2020 By Example
- 精通Nginx（第2版）
- Microsoft Application Virtualization Cookbook
- Vue.js快跑：構建觸手可及的高性能Web應用
- 三維圖形化C++趣味編程
- 名師講壇：Java微服務架構實戰（SpringBoot+SpringCloud+Docker+RabbitMQ）
- 小程序開發原理與實戰
- Mastering Drupal 8 Views
- Mastering Linux Security and Hardening
- C語言程序設計與應用（第2版）
- JBoss：Developer's Guide
- 平面設計經典案例教程：CorelDRAW X6
- C#程序設計基礎入門教程
- jQuery從入門到精通（微課精編版）
- ArcPy and ArcGIS（Second Edition）