Use JS to control the upper and lower right keys of the keyboard

Use JS to control the upper and lower right keys of the keyboard

This article mainly introduces the sample code of using JS to control the upper and lower right keys of the keyboard. For more information, see.

This is a beginner JavaScript code. If you want to learn JavaScript code, you can study it or expand it. It is best to use JavaScript to control the entire keyboard. This is very interesting.

 

The Code is as follows:

 

The Code is as follows:

<Style>

Tr. highlight {background: # 000006b; color: white ;}

</Style>

<Table border = "1" width = "70%" id = "ice">

<Tr>

<Td> <input type = 'text'> </td>

<Td> <input type = 'text'> </td>

<Td> <input type = 'text'> </td>

<Td> <input type = 'text'> </td>

</Tr>

<Tr>

<Td> <input type = 'text'> </td>

<Td> <input type = 'text'> </td>

<Td> <input type = 'text'> </td>

<Td> <input type = 'text'> </td>

</Tr>

<Tr>

<Td> <input type = 'text'> </td>

<Td> <input type = 'text'> </td>

<Td> <input type = 'text'> </td>

<Td> <input type = 'text'> </td>

</Tr>

<Tr>

<Td> <input type = 'text'> </td>

<Td> <input type = 'text'> </td>

<Td> <input type = 'text'> </td>

<Td> <input type = 'text'> </td>

</Tr>

<Tr>

<Td> <input type = 'text'> </td>

<Td> <input type = 'text'> </td>

<Td> <input type = 'text'> </td>

<Td> <input type = 'text'> </td>

</Tr>

</Table>

<Script language = "javascript">

<! --

// Define the initialization Columns

Var currentLine =-1;

Var currentCol =-1;

Document. onkeydown = function (e ){

E = window. event | e;

Switch (e. keyCode ){

Case 37: // left button

CurrentCol --;

ChangeItem ();

Break;

Case 38: // up key

CurrentLine --;

ChangeItem ();

Break;

Case 39: // right-click

CurrentCol ++;

ChangeItem ();

Break;

Case 40: // down key

CurrentLine ++;

ChangeItem ();

Break;

Default:

Break;

}

}

// Direction key call

Function changeItem (){

If (document. all)

Var it = document. getElementByIdx_x ("ice"). children [0];

Else

Var it = document. getElementByIdx_x ("ice ");

For (I = 0; I <it. rows. length; I ++ ){

It. rows [I]. className = "";

}

If (currentLine <0 ){

CurrentLine = it. rows. length-1;

}

If (currentLine = it. rows. length ){

CurrentLine = 0;

}

Var objtab = document. all. ice;

Var objrow = objtab. rows [currentLine]. getElementsByTagName_r ("INPUT ");

If (currentCol <0 ){

CurrentCol = objrow. length-1;

} Else if (currentCol = objrow. length ){

CurrentCol = 0;

}

Objrow [currentCol]. select ();

// Debug and use

It. rows [currentLine]. className = "highlight ";

}

// -->

</Script>