jquery implements the keyboard listener program code

Example

The code is as follows

Copy Code

<script src= "jquery-1.11.0.min.js" type= "Text/javascript" ></script> <script type= "Text/javascript" >   //Get keyboard ASCII code; //$ (document). KeyDown (function (event) { //Alert (Console.log (Event.keycode)); //alert (Event.keycode);         //});   $ (document). KeyDown (function (event) { Judge when Event.keycode is 37 o'clock (that is, left side key), execute function to_left (); //Judge when Event.keycode is 39 o'clock (that is, right side key), execute function to_right (); if (Event.keycode = = 37) { alert (' left '); } else if (Event.keycode = 39) { alert (' right ');             } else if (Event.keycode = 27) { Alert (' Esc key ');             } else if (Event.keycode = 13) { alert (' Enter ');             } else { alert (' The ASCII code of this button, is ' + Event.keycode ');             }         }); </script> <!-- The KeyDown event is triggered when the keyboard is pressed. The KeyUp event triggers when the key is released, which is the event that you press the keyboard up The KeyPress event triggers when the keystroke is hit, which we can understand as pressing and lifting the same button -->

Binding events in the application more monitoring, such as we use the upper and lower pages to implement the keyboard by the right and left, the following collation of the similar examples.

The logic of implementing the effect is relatively simple, that is, the Slidedown () method,
JS Code Collection Code

code is as follows

copy code

//shows a given element and hides all Others  &nbs P;&NBSP Function showviakeypress (element_id)      {          $ (". Container"). CSS ("display", "none");          $ (element_id). Slidedown ("slow");      }          //Shows Proper DIV depending on link ' href '      function Showvialink (array)      {         Array.each (function (i)           {                $ (this). Click (function ()              {                 var target = $ (this). attr ("href");                   $ (". Container"). CSS ("display", "none");                   $ (target). Slidedown ("slow");              });         });      }

and the keyboard key to monitor the use of the KeyPress () method, in fact, there is no difficulty, but we rarely use the button on the page to monitor, this example is more novel, it is worth our reference, if necessary, can be used in the project.
JS Code Collection Code

The code is as follows

Copy Code

$ (document). KeyPress (function (e)     {     switch (E.which)         {     //user presses the "a" case 97:showviakeypress ("#home"); Break                              //user presses the "s" Key case 115:showviakeypress ("#about"); break; //user presses the "D" key case 100:showviakeypress ("#contact"); break;                              //user presses the "F" key Case 102:showviakeypress ("#awards"); break;                              //user presses the "G" Key case 103:showviakeypress ("#links");         }         });