Complete implementation and application of js client Shortcut Key Management

Copy codeThe Code is as follows:
// A shortcut key object
Function KeyOne (id, keys, dom, isfun, fun, iskeydown ){
This. id = id;
This. keys = keys;
This. dom = dom;
This. isfun = isfun;
This. fun = fun;
This. isKeydown = iskeydown;
}

// Shortcut Key Management
Var KeyConlor = {};
KeyConlor. list = new Array ();
// Add a shortcut key to bind the focus (set the focus to the specified id object when the shortcut key is activated)
// If the key value of the instruction is "c, 50", the key combination is "ctrl" and the key code is 50.
// "A, 50" indicates the combination of "alt" and 50 key codes.
// "S, 50" indicates the combination of "shift" and 50 key codes.
// "50" indicates a single key with a 50 key code (alt is recommended)
// Id indicates the focal point object corresponding to the shortcut key.
// Dom indicates the document Object of the id object.
KeyConlor. addkeyfouse = function (id, key, dom, iskyedown ){
Var keyone = new KeyOne (id, key, dom, false, null, iskyedown );
If (KeyConlor. KeyIsOK (keyone )){
KeyConlor. list. push (keyone );
} Else {
Alert ("shortcut key" + keyone. keys + "already registered cannot be registered again ");
Return false;
}
};

// Shortcut Key Binding method (triggered when the shortcut key is activated)
KeyConlor. addkeyfun = function (key, fun, iskeydown ){
Var keyone = new KeyOne ("", key, "", true, fun, iskeydown );
If (KeyConlor. KeyIsOK (keyone )){
KeyConlor. list. push (keyone)
} Else {
Alert ("shortcut key:" + keyone. keys + "; already registered. Repeated registration is invalid ");
Return false;
}
};

// -- Delete a shortcut key
// KeyConlor. removeFouseKey = function (id ){
// Var keyone = new KeyOne (id ,"");
// For (var I = 0; I <KeyConlor. list. length; I ++ ){
// If (keyone. id = KeyConlor. list [I]. id ){
// KeyConlor. list [I] = null;
//}
//}
//};

// -- Judge whether the shortcut key is registered repeatedly
KeyConlor. KeyIsOK = function (keyone ){
For (var I = 0; I <KeyConlor. list. length; I ++ ){
If (KeyConlor. list [I]. keys = keyone. keys ){
Return false;
}
}
Return true;
};
Document. onkeydown = function (){
For (var I = 0; I <KeyConlor. list. length; I ++ ){
Var keyone = KeyConlor. list [I];
If (! Keyone. isKeydown) continue;
Var control = keyone. keys. split (",") [0];
Switch (control ){
Case's ':
Var code = keyone. keys. split (","). length> 1? Keyone. keys. split (",") [1]: keyone. keys. split (",") [0];
If (event. shiftKey = true & event. keyCode = code ){
// Obtain the focus
If (! Keyone. isfun ){
Keyone. dom. getElementById (keyone. id). focus ();
} Else {
Keyone. fun ();
}
Event. keyCode = 0;
Return false;
}
Break;
Case 'C ':
Var code = keyone. keys. split (","). length> 1? Keyone. keys. split (",") [1]: keyone. keys. split (",") [0];
If (event. ctrlKey = true & event. keyCode = code ){
// Obtain the focus
If (! Keyone. isfun ){
Keyone. dom. getElementById (keyone. id). focus ();
} Else {
Keyone. fun ();
}
Event. keyCode = 0;
Return false;
}
Break;
Case 'A ':
Var code = keyone. keys. split (","). length> 1? Keyone. keys. split (",") [1]: keyone. keys. split (",") [0];
If (event. altKey = true & event. keyCode = code ){
// Obtain the focus
If (! Keyone. isfun ){
Keyone. dom. getElementById (keyone. id). focus ();
} Else {
Keyone. fun ();
}
Event. keyCode = 0;
Return false;
}
Event. keyCode = 0;
Break;

Default:
// Obtain the focus
Var code = keyone. keys. split (","). length> 1? Keyone. keys. split (",") [1]: keyone. keys. split (",") [0];
If (event. keyCode = code & event. altKey = false & event. ctrlKey = false & event. shiftKey = false ){
If (! Keyone. isfun ){
Keyone. dom. getElementById (keyone. id). focus ();
} Else {
Keyone. fun ();
}
Event. keyCode = 0;
Return false;
}
Break;
}
}
};
Document. onkeyup = function (){
For (var I = 0; I <KeyConlor. list. length; I ++ ){
Var keyone = KeyConlor. list [I];
If (keyone. isKeydown) continue;
Var control = keyone. keys. split (",") [0];
Switch (control ){
Case's ':
Var code = keyone. keys. split (","). length> 1? Keyone. keys. split (",") [1]: keyone. keys. split (",") [0];
If (event. shiftKey = true & event. keyCode = code ){
// Obtain the focus
If (! Keyone. isfun ){
Keyone. dom. getElementById (keyone. id). focus ();
} Else {
Keyone. fun ();
}
Event. keyCode = 0;
Return false;
}
Break;
Case 'C ':
Var code = keyone. keys. split (","). length> 1? Keyone. keys. split (",") [1]: keyone. keys. split (",") [0];
If (event. ctrlKey = true & event. keyCode = code ){
// Obtain the focus
If (! Keyone. isfun ){
Keyone. dom. getElementById (keyone. id). focus ();
} Else {
Keyone. fun ();
}
Event. keyCode = 0;
Return false;
}
Break;
Case 'A ':
Var code = keyone. keys. split (","). length> 1? Keyone. keys. split (",") [1]: keyone. keys. split (",") [0];
If (event. altKey = true & event. keyCode = code ){
// Obtain the focus
If (! Keyone. isfun ){
Keyone. dom. getElementById (keyone. id). focus ();
} Else {
Keyone. fun ();
}
Event. keyCode = 0;
Return false;
}
Break;

Default:
// Obtain the focus
Var code = keyone. keys. split (","). length> 1? Keyone. keys. split (",") [1]: keyone. keys. split (",") [0];
If (event. keyCode = code & event. altKey = false & event. ctrlKey = false & event. shiftKey = false ){
If (! Keyone. isfun ){
Keyone. dom. getElementById (keyone. id). focus ();
} Else {
Keyone. fun ();
}
Event. keyCode = 0;
Return false;
}
Break;
}
}
};
// Common keyboard Codes
Var keyCodeStr = {
Alt: "",
Shift: "s ",
Ctrl: "c ",
Up: "38 ",
Down: "40 ",
Left: "37 ",
Right: "39 ",
Esc: "27 ",
Enter: "13 ",
Backspace: "8 ",
Delete: "46 ",
Tab: "9 ",
CapsLK: "20 ",
Space: "32"
};
[Code]
---------- The above are js classes -------------------------------

[Code]
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> </title>

<Script src = "KyeControl. js" type = "text/javascript"> </script>
<Script type = "text/javascript">
KeyConlor. addkeyfun (keyCodeStr. Ctrl + "," + "70", function () {alert ("Haha") ;}, true );
KeyConlor. addkeyfouse ("2", "65", document, true );
</Script>
</Head>
<Body>
<Form id = "form1">
<Div>
<Input type = "text" id = "2"/>
<Input type = "text" id = "3"/>
<Input type = "text" id = "4"/>
<Input type = "text" id = "5"/>
</Div>
</Form>
</Body>
</Html>