官术网_书友最值得收藏!

首頁(yè) >

jQuery 2.0 Development Cookbook

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:

  1. 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>
  2. Within the script tags, add the following JavaScript code to attach both the keyup and keydown event 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:

How it works…

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
主站蜘蛛池模板： 民丰县| 石楼县| 宜川县| 邢台县| 广州市| 英超| 五指山市| 财经| 汪清县| 资中县| 元江| 盘山县| 济源市| 扶绥县| 镇安县| 大厂| 榆中县| 石阡县| 浪卡子县| 上思县| 宁远县| 谢通门县| 柏乡县| 白沙| 新昌县| 兴山县| 上蔡县| 黄浦区| 青田县| 诏安县| 灵寿县| 叙永县| 萍乡市| 手游| 博客| 普宁市| 余干县| 无锡市| 民乐县| 永州市| 盐山县|