Home >Web Front-end >JS Tutorial >Detailed explanation of the difference between keyUp and keyDown in JQuery

Detailed explanation of the difference between keyUp and keyDown in JQuery

黄舟Original: 2017-06-27 13:39:311628browse

This article mainly provides a detailed analysis and introduction to the difference between keyUp and keyDown in JQuery. Friends who need it can come and refer to it. I hope it will be helpful to everyone

Definition and Usage
The complete key press process is divided into two parts: 1. The key is pressed; 2. The key is released.

The keydown event occurs when the button is pressed.

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

The code is as follows:

<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>当发生 keydown 和 keyup 事件时，输入域会改变颜色。请试着在其中输入内容。</p>
</body>
</html>

As we all know, jquery encapsulates many event interaction methods, and the problems mentioned here also exist in native js.

keyup is triggered when the user lifts the key. It is the last stage of the entire key pressing process, so it has its specific use, that is, in the process of typing on the left and simultaneous display on the right. Very useful. A typical example is the application of email editing preview.

The code is as follows:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>无标题页</title>

    <script src="JS/jquery-1.4.2.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function() {
            $(&#39;#t1&#39;).live(&#39;keyup&#39;, function() {
                $(&#39;#v1&#39;).text($(this).val());
            });
            $(&#39;#t2&#39;).live(&#39;keydown&#39;, function() {
                $(&#39;#v2&#39;).text($(this).val());
            });
            $(&#39;#t3&#39;).live(&#39;keypress&#39;, function() {
                $(&#39;#v3&#39;).text($(this).val());
            });
        });    
    </script>

</head>
<body>
    <textarea id="t1"></textarea>
    <p id="v1">
    </p>
    <textarea id="t2"></textarea>
    <p id="v2">
    </p>
    <textarea id="t3"></textarea>
    <p id="v3">
    </p>
</body>
</html>

Three events are applied here, among which t1 can be completely synchronized to v1, while keypress and keydown always lack the last character. , this illustrates the small difference in the triggering of these three events. Keydown is triggered when pressed, and the final input result cannot be obtained. The same is true for keypress.

For example: keydown binds the text box, and each click triggers an event. When getting the value of the text box, the content of the text box during the last operation is always printed.

This is because of the keydown operation Finally, the event is triggered, but the value has not yet been displayed in the text box, so this type of operation requires a complete keyup with keyup before the value of the text box can be obtained.

keydown and keypress are more suitable for the implementation of page functions controlled through the keyboard.

Get the key clicked on the keyboard:

The code is as follows:

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("input").keydown(function(event){ 
    $("p").html("Key: " + event.which);
  });
});
</script>
</head>
<body>

Please type some characters as you like: 22e1bb649e3e439c82b64204a5f95e3f
< ;p>As you type text in the box above, the p below displays the key number. 94b3e26ee717c64999d7867364b1b4a3
7493e18ec8d2afde690a0696fdaf5e59
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

The above is the detailed content of Detailed explanation of the difference between keyUp and keyDown in JQuery. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of the use and definition of jQuery.keydown() functionNext article：Detailed explanation of the use and definition of jQuery.keydown() function

See more

Detailed explanation of the difference between keyUp and keyDown in JQuery

Related articles