Keyboard control event application tutorial_Basic knowledge

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

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, regardless of whether the keyboard is pressed Whichever key is on, 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 Confused with mouse down events. The special statements are 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)

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. Convert the index value to the alphanumeric value of the key. Write:

String.fromCharCode(e.which)

Change the above Putting the statements together, we can know which key was 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

IE’s program is similar to Netscape, but it does not require the e variable. Use window.event.keyCode instead of e.which. The method of converting the key index value into the real key value is similar: 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 suitable for both

Use two Check the above example with the browser, and 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:

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 keyboard to move objects

The following program implements moving objects with the keyboard. The program will check which key is pressed. Thus calling 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.

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 necessary, 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.

function slide() {
if (myobj.active) {
myobj.xpos = 5
myojb.left = myobj.xpos
setTimeout("slide()", 30)
　}
}

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:

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 and the object stops. Move and set the active variable 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 relatively 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)
}
}