Description of keyboard control events in javascript_javascript skills

Control the carriage return focus issue:

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, no matter which key on the keyboard is pressed, the KeyDown() function will be called.
Capturing keyboard events is a bit difficult for different browsers. We will learn the implementation statements of different browsers separately.
Netscape
The program implementation of Netscape is more troublesome than IE. You must put a special statement to make Netscape always check keystroke events. Without this line of statement, keystroke events will be confused with mouse press events. mix. The special statement is as follows:
Document.onkeydown = keyDown
if (ns4) document.captureEvents(Event.KEYDOWN)
The keyDown() function has a hidden variable - generally, we use the letter "e" to represent this function.
Function keyDown(e)
The variable e represents a keystroke event. Find which key was pressed. Use the following attributes:
e.which
This will give the index value of the key. To convert the index value into the alphanumeric value of the key, write:
String.fromCharCode(e.which)
Putting the above statements together, we can know which key was pressed:

Internet Explorer
The program of IE is similar to Netscape, but it does not need the e variable. Use window.event.keyCode instead of e.which to change the index value of the key. The method of converting to real key value is similar: String.fromCharCode(event.keyCode), the program is as follows:

　 Procedure for both
Check the above example with both browsers, you You will find that the execution results are not always the same. This is because the keyboard code settings of the two browsers are different, so you must use separate code to write this program separately, and there is no other way.
It is recommended that you completely forget about the actual key values ​​and just work with the keyboard code values. The following program will be set according to the situation. If you are using IE, ieKey will take effect and nKey will be set to 0. If you are using Netscape, nKey will take effect and nKey will be set to 0. Then use an alert box to display both. Value:

Using the keyboard to move objects
The following program implements moving objects using the keyboard. 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 starts to move. The value of the letter "A" key in nKey is 97, and the value of ieKey is 65. These two values ​​​​will be checked separately in the program.

Add the "Active" variable
The above program is slightly lacking. Once the object moves, it cannot be stopped, and when you press the A key a few more times, the object will move faster and faster. Here we will fix it.
Use the variable "active" to change this situation and insert an if statement to check if the function is repeated.

Copy code


The code is as follows: The keyUp() function is the same. When a key is released, the event is fired, the object stops moving, and the active variable is set to 0:

The code is as follows:}

The code is as follows: document.onkeydown = keyDown