Keyboard Control event application tutorial

Obtaining keyboard control events is one of the most powerful ways to achieve interaction.

First, you need to know how to initialize the event. The basic statement is as follows:

Document. onkeydown = keyDown

When the browser reads this statement, the KeyDown () function is called 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.

Netscape

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 will be mixed with the mouse-clicking event. The special statement is as follows:

Document. onkeydown = keyDown
If (ns4) document. captureEvents (Event. KEYDOWN)

The 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-down event occurs. To find which key is pressed, use the following attributes:

E. which

This will give the index value of the key, convert the index value to the letter or number value of the key, write:

String. fromCharCode (e. which)

By putting 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)

Internet Explorer

The program of IE is similar to that of Netscape, but it does not need the e variable. 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

Programs for both

Check the above instances in two browsers and 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)

Move objects with a keyboard

The following program uses the keyboard to move an 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 the "A" Key is pressed
Slide ()
}
}
Function slide (){
Block. xpos + = 5
Block. left = block. xpos
Status = block. xpos // This statement is not necessarily required, just to check the status
SetTimeout ("slide ()", 30)
}

Add the "Active" variable

The above program is A little inadequate. After the object is moved, it cannot be stopped. When you press the key several times more, the object will be moving 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
Myomjb. left = myobj. xpos
SetTimeout ("slide ()", 30)
}
}

In this case, the slide () function works only when the value of myobj. active is true. When the value of myobj. active is false, the object stops moving.

Use the onKeyUp and "Active" Variables

The onkeyup event and onkeydown event work in the same way. Use the following statement to initialize the event:

Document. onkeydown = keyDown
Document. onkeyup = keyUp
If (ns4) document. captureEvents (Event. KEYDOWN | Event. KEYUP)

The keyUp () function is the same as the function. When a key is released, the current event is triggered, the object stops moving, 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
Block. left = block. xpos
Status = block. xpos // not needed, just for show
SetTimeout ("slide ()", 30)
}
}