Detailed explanation of the difference between keyUp and keyDown in JQuery-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Detailed explanation of the difference between keyUp and keyDown in JQuery

黄舟

Jun 27, 2017 pm 01:39 PM

jquerykeydownkeyup

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:
< ;p>As you type text in the box above, the p below displays the key number.

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