Home > Developer > JavaScript
Differences between JQuery keyUp and keyDown
This article mainly analyzes the differences between keyUp and keyDown in JQuery in detail. If you need them, you can refer to them and hope to help you.
Definition and usage
The complete key press process is divided into two parts: 1. The key is pressed; 2. The key is released.
A keydown event occurs when the button is pressed.
The keydown () method triggers the keydown event, or specifies the function that runs when a keydown event occurs.
The Code is as follows:
<Html>
<Head>
<Script type = "text/javascript" src = "/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 or keyup event occurs, the color of the input field changes. Please try to enter the content in it. </P>
</Body>
</Html>
As we all know, jquery encapsulates many event interaction methods. The problems mentioned here are also found in native js.
Keyup is triggered only when the user raises the key. It is in the final stage of the entire key process. Therefore, it is useful to input it on the left, synchronous display on the right is very useful. A typical example is the mail edit preview application.
The Code is as follows:
<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 ('keylow', 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>
Three events are applied here, where t1 can be completely synchronized to v1, while keypress and keydown are always less than the last character. This shows a small difference between the trigger of the three events, keydown is triggered when it is pressed and cannot get the final input result. keypress is the same.
For example, when keydown is bound to a text box, the trigger event is clicked each time. When the value of the text box is obtained, the content of the text box in the last operation is always printed,
This is because after the keydown operation, the event is triggered, but the value is not displayed in the text box, so this type of operation requires a complete keyup button action, you can get the value of the text box.
Keydown and keypress are more suitable for the implementation of page class control through the keyboard.
Obtain the key position of a keyboard CLICK:
The Code is as follows:
<Html>
<Head>
<Script type = "text/javascript" src = "/jquery. js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("Input"). keydown (function (event ){
$ ("Div" ).html ("Key:" + event. which );
});
});
</Script>
</Head>
<Body>
Enter some characters at will: <input type = "text"/>
<P> when you type text in the above box, the following div displays the key sequence number. </P>
<Div/>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
