Understand the difference between JQuery keyUp and keyDown

2020-03-30 00:48:45
OfStack

Definition and usage
The complete key press process is divided into two parts: 1. 2. The button is released.

A keydown event occurs when a button is pressed.

The keydown() method triggers the keydown event, or specifies the function to run when the keydown event occurs.


<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("input").keydown(function(){
    $("input").css("background-color","#FFFFCC");
  });
  $("input").keyup(function(){
    $("input").css("background-color","#D6D6FF");
  });
});
</script>
</head>
<body>
Enter your name: <input type="text" />
<p> When a  keydown  and  keyup  Event, the input field changes color. Please try to enter something in it. </p>
</body>
</html>

As we all know, jquery encapsulates many methods of event interaction, and the problems discussed here are also found in native js.

Keyup is triggered when the user lifts the key, which belongs to the last stage of the whole keypress process. Therefore, it has its specific use, that is, it is very useful in the process of input on the left and synchronous display on the right. A typical example is the application of mail editing preview.


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title> No title page </title>
    <script src="JS/jquery-1.4.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $('#t1').live('keyup', function() {
                $('#v1').text($(this).val());
            });
            $('#t2').live('keydown', function() {
                $('#v2').text($(this).val());
            });
            $('#t3').live('keypress', function() {
                $('#v3').text($(this).val());
            });
        });    
    </script>
</head>
<body>
    <textarea id="t1"></textarea>
    <div id="v1">
    </div>
    <textarea id="t2"></textarea>
    <div id="v2">
    </div>
    <textarea id="t3"></textarea>
    <div id="v3">
    </div>
</body>
</html>

Here, three kinds of events are applied respectively. Among them, t1 can be fully synchronized to v1, while keypress and keydown always lose the last character, which shows the small difference between these three kinds of events. Keydown is triggered when pressed and cannot get the final input result, and keypress is the same.

For example: keydown binds the text box, triggers the event with each click, gets the value of the text box, and always prints the content of the text box in the last operation.

This is because after the keydown operation, the event is triggered, but the value is not yet displayed in the text box, so this type of operation requires a complete keyup keystroke to get the value of the text box.

Keydown and keypress are more suitable for the realization of page class functions controlled by keyboard.

Get the key position of keyboard click:


<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("input").keydown(function(event){ 
    $("div").html("Key: " + event.which);
  });
});
</script>
</head>
<body>
 Please feel free to type some characters: <input type="text" />
<p> When you type text in the box above, the following  div  The key number is displayed. </p>
<div />
</body>
</html>