The difference between JQuery KeyUp and KeyDown

Source: Internet
Author: User

  This article is mainly about the difference between KeyUp and KeyDown in jquery detailed analysis of the introduction, the need for friends can come to the reference, I 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 loosened.   The KeyDown event occurs when the button is pressed. The   KeyDown () method triggers the KeyDown event, or a function that runs when the KeyDown event occurs.     Code 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> when KeyDown and KeyUp events occur, the loss The field changes color. Please try to enter the content in it. </p> </body> </html>   As we all know, jquery encapsulates a lot of event interaction methods, and the problems mentioned here are also in native JS.   KeyUp is triggered when the user will press the button, which belongs to the final stage of the whole key process, so it has its specific use, which is in the left side of the input, the right side of the synchronized display of the process is very useful. A typical example is the application of a mail-editing preview.   Code as follows: <html xmlns= "" > <head>     <title> Untitled 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 ()); &NB Sp          });             $ (' #t2 '). Live (' KeyDown ', function () {                $ (' #v2 '). Text ($ (this). Val ());            });             $ (' #t3 '). Live (' KeyPress ', function () {                $ (' #v3 '). Text ($ (this). Val ());            });        });         </script>   </head> <body>     <textarea id= "T1" ></ Textarea> &nbsP   <div id= "v1" >     </div>     <textarea id= "T2" ></textarea>   &nbs P <div id= "v2" >     </div>     <textarea id= "T3" ></textarea>     < Div id= "v3" >     </div> </body> </html>     Three events are applied here, where T1 can be synchronized fully to V1. and KeyPress and KeyDown is always less the last character, this explains the three kinds of event trigger small difference, KeyDown is pressed when the trigger, can not get the final input results, KeyPress is the same.   For example: KeyDown bound text box, each Click to trigger events, the value of the text box is obtained, always print the contents of the text box when the last action,   this is because after the KeyDown operation, the event is triggered, but the value has not been shown in the text box, so this kind of operation to use A full keystroke action before you can get the value of the text box.   KeyDown and KeyPress are more suitable for the realization of the function of page class through keyboard control.   Get keys to keyboard clicks:     Code as follows: <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 displays the key number. </p> <div/> </body> </html>    
Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.