Description of keyboard control events in javascript_javascript skills

Control the carriage return focus issue:

Copy code The code is as follows:

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:

Copy code The code is as follows:

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 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:

Copy code The code 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

　 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:

Copy code The code is as follows:

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)

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.

Copy code The code is as follows:

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 sentence is not necessarily needed, just to check the status
SetTimeout("slide()",30)
}

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:

Function slide() {
if (myobj. active) {
myobj. > In this case, the slide() function will only work when the value of myobj.active is true. When the value of myobj.active is false, the object will stop moving.
Use onKeyUp and "Active" variables
The onkeyup event works the same as the onkeydown event. Use the following statement to initialize the event:

Copy code


The code is as follows:

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

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:

Copy code

The code is as follows:

　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 relatively complete program:




Copy code

The code is as follows:

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)
}
}