The JS keyboard control event tutorial obtains keyboard control events, which is one of the most interactive methods. The first thing you need to know is how to initialize the event. The basic statement is as follows: document. onkeydown = keydown when the browser reads this statement, it calls the keydown () function no matter which key is pressed on the keyboard. Capturing Keyboard Events is a little difficult for different browsers. Let's learn the implementation statements of different browsers separately. The Program Implementation of Netscape is more troublesome than that of IE. You must put a special statement to make Netscape always check the key-hitting event. If no such statement exists, the key-hitting event is mixed with the mouse-clicking event. The special statement is as follows: document. onkeydown = keydown if (ns4) document. captureevents (event. the keydown) keydown () function has a hidden variable-General. We use the letter "E" to represent this function. Function keydown (e) variable e indicates that a key event occurs. To find which key is pressed, use the following attributes: E. which, which gives the index value of the key, converts the index value to the letter or number value of the key, and writes it to string. fromcharcode (E. when we put the preceding statement together, we can know which key is pressed: function keydown (e) {var keycode = E. which var realkey = string. fromcharcode (E. which) Alert ("keycode:" + keycode + "realkey:" + realkey)} document. onkeydown = keydown document. captureevents (event. keydown) The program of Internet Explorer is similar to that of Netscape, but it does not need the E variable, Use window. event. keycode to replace E. which: Convert the index value of the Key to the real key value. The method is similar to: string. fromcharcode (event. keycode), the program is as follows: function keydown () {var keycode = event. keycode var realkey = string. fromcharcode (event. keycode) Alert ("keycode:" + keycode + "realkey:" + realkey)} document. onkeydown = keydown document. onkeydown = keydown is applicable to the two applications. Check the above instances in two browsers. You will find that the execution results are not always the same, because the keyboard code settings of the two browsers are different, therefore, you must use separate code to write this program separately. We recommend that you forget the actual key value and only use the code value of the keyboard to work. The following program will be set as needed. If IE is used, iekey will take effect and nkey will be set to 0. If Netscape is used, nkey will take effect and nkey will be set to 0, then, a warning box is used to display the values of the two: function keydown (e) {If (ns4) {var nkey = E. which; var iekey = 0} If (ie4) {var iekey = event. keycode; var nkey = 0} alert ("nkey:" + nkey + "iekey:" + iekey)} document. onkeydown = keydown if (ns4) document. captureevents (event. keydown) use the program below the keyboard to move the object. The program will check which key is pressed and call the corresponding function to move the object. In this example, when the letter "A" is pressed, the object begins to move. The value of the letter "A" in the nkey is 97, and the value of iekey is 65, the two values will be checked separately in the program. Function Init () {If (ns4) block = document. blockdiv if (ie4) block = blockdiv. style block. xpos = parseint (Block. left) document. onkeydown = keydown if (ns4) document. captureevents (event. keydown)} function keydown (e) {If (ns4) {var nkey = E. which; var iekey = 0} If (ie4) {var iekey = event. keycode; var nkey = 0} If (nkey = 97 | iekey = 65) {// if "A" Key is pressed slide ()} function slide () {block. xpos + = 5 B Lock. left = block. xpos status = block. the xpos // statement is not required. It is only required to check the status of setTimeout ("slide ()", 30)} and add the "active" variable. The program is slightly insufficient, after the object is moved, it cannot be stopped. When you press the key several times, the object moves faster and faster. Here we will fix it. Use the variable "active" to change this situation. Insert the if statement to check whether the function is repeated. Function slide () {If (myobj. active) {myobj. xpos + = 5 myojb. left = myobj. xpos setTimeout ("slide ()", 30)} in this case, the slide () function is only available in myobj. work only when the active value is true. When the active value is myobj. when the active value is false, the object will stop moving. The onkeyup event and the onkeydown event use the same operating principle. Use the following statement to initialize the event: document. onkeydown = keydown document. onkeyup = keyup if (ns4) document. captureevents (event. keydown | event. keyup) keyup () functions are the same. When a key is released, the current event is triggered, the object is stopped, and the active variable is set to 0: function keyup (e) {If (ns4) var nkey = E. which if (ie4) var iekey = Window. event. keycode if (nkey = 97 | iekey = 65) block. active = false} The following is a complete program: function Init () {If (ns4) block = document. blockdiv if (ie4) block = blockdiv. style block. xpos = parseint (Block. left) block. active = false document. onkeydown = keydown document. onkeyup = keyup if (ns4) document. captureevents (event. keydown | event. keyup)} function keydown (e) {If (ns4) {var nkey = E. which; var iekey = 0} If (ie4) {var iekey = event. keycode; var nkey = 0} If (nkey = 97 | iekey = 65 )&&! Block. active) {// if "A" Key is pressed block. active = true slide ()} function keyup (e) {If (ns4) {var nkey = E. which; var iekey = 0} If (ie4) {var iekey = event. keycode; var nkey = 0} If (nkey = 97 | iekey = 65) {block. active = false // if "A" Key is released} function slide () {If (Block. active) {block. xpos + = 5 blocks. left = block. xpos status = block. xpos // not needed, just for show setTimeout ("slide ()", 30 )}}
