Keyboard control events for JavaScript

Javascript| Control

Getting 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, the KeyDown () function is called regardless of which key is pressed on the keyboard.

Capturing keyboard events is a bit difficult for different browsers, and we're learning different browser implementation statements separately.

Netscape

Netscape's program implementation than IE trouble, you have to put a special statement to enable Netscape to always check the keystroke events, if there is no such line, the keystroke event will be confused with the mouse event. The special statements are as follows:

Document.onkeydown = KeyDown
if (NS4) document.captureevents (Event.keydown)

The KeyDown () function has a hidden variable--in general, we use the letter "E" to represent this function.

function KeyDown (e)

The variable e indicates that a keystroke event occurs, looking for which key is being pressed, using the following properties:

E.which

This gives the index value of the key, converts the index value to the letter or numeric value of the key, and writes:

String.fromCharCode (E.which)

Put the above statement together and we can know which key is being 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 need e variable, with Window.event.keyCode instead of E.which, the key index value into the real key method is similar: String.fromCharCode (Event.keycode) , the procedure 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 that apply to both

Check the above example with two browsers, you will find that the execution results are not always the same, because the keyboard code settings for both browsers are different, so you have to use separate code to write the program, and no other way.

It is recommended that you completely forget the actual key values and use only the code values of the keyboard to work. The following procedure will be set depending on the situation, if the use of IE, iekey effective, the Nkey set to 0, if the use of Netscape, Nkey effective, the Nkey set to 0, and then use a warning box to display the value of both:

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)

Moving objects using the keyboard

The following program implementation moves the object with the keyboard, and the program checks which key is pressed to invoke the corresponding function to move the object. In this example, when the letter "a" is pressed, the object begins to move, and the value of the letter "a" key in Nkey is 97,iekey 65, and the values are 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)
}

Adding an "Active" variable

The above program is a little bit inadequate, the object will not be able to stop it after moving, and when you press the a key more than a few times, the object is moving faster, here we repair it.

Use the variable "active" to change this situation and insert an if statement to check whether the function is duplicated.

function Slide () {
if (myobj.active) {
Myobj.xpos + 5
Myojb.left = Myobj.xpos
settimeout ("Slide ()", 30)
}
}

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

Using OnKeyUp and "Active" variables

The onkeyup event works the same as the onkeydown event and initializes the event with the following statement:

Document.onkeydown = KeyDown
Document.onkeyup = KeyUp
if (NS4) document.captureevents (Event.keydown | Event.keyup)

The KeyUp () function is the same as when a key is released, the event is fired, the object stops moving, and the active variable is placed 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
}

Here are the more complete programs:

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}