There must be such a demand: we hope to use shortcuts instead of mouse clicks to do something. For example, a typical application is commonly used on forums to send posts through Ctrl + enter. Take Ctrl + enter as an example to send a post quickly. In essence, it is to capture the onkeyup event of the system through JS scripts and determine the event. whether ctrlkey is true and event. the keycode is 13. If this condition is met, the click () method of the button object is called, which is equivalent to clicking the button with the mouse. Write a simple sample code:
<HTML>
<Head>
<Title> example code submitted by the shortcut key </title>
<LINK rel = "stylesheet" href = 'css/style.css 'type = "text/CSS">
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Meta name = "author" content = "Baoyu"/>
<Script language = "JavaScript" type = "text/JavaScript">
<! --
// Shortcut key response
// Targetobj: target object. If the shortcut key condition is met, the Click Event of the target object is triggered.
// Ctrlkey: whether or not CTRL is used
// Shiftkey: whether shift is used
// Altkey: whether or not the Alt key combination is pressed
// Keycode: Key Value
Function hotkey (event, targetobj, ctrlkey, shiftkey, altkey, keycode)
{
If (
Targetobj
& Event. ctrlkey = ctrlkey
& Event. shiftkey = shiftkey
& Event. altkey = altkey
& Event. keycode = keycode
)
Targetobj. Click ();
}
Function fnkeyup (Event)
{
VaR B = Document. getelementbyid ("mybutton ");
Hotkey (event, B, true, false, false, 13 );
}
// Capture system keyup events
// For Mozilla browsers
If (document. addeventlistener)
Document. addeventlistener ("keyup", fnkeyup, true );
Else
Document. attachevent ("onkeyup", fnkeyup );
// -->
</SCRIPT>
</Head>
<Body>
<Form method = "get" Action = "No. aspx">
<Input type = "Submit" id = "mybutton"/>
CTRL + enter
</Form>
</Body>
</Html>
The above script can easily add shortcuts to the specified button. If we want to apply them to our server-side controls, such as buttons, linkbuttons, and hyperlink, because the controls have different IDs and their corresponding shortcuts, then we need to write a control to add shortcuts to them.
Think about the properties required by this control?
Targetcontrolid: String: since it is bound to other controls, the ID of the target control to be bound is indispensable. Based on the Control ID, we can determine a control, in order to know the client ID when it is output, you can determine this object in the script according to the Client ID.
Ctrlkey: bool: determines whether the ctrl key combination is used
Shiftkey: bool: determines whether shift keys are used.
Altkey: bool: determines whether alt keys are used
Keycode: INT: corresponds to event. keycode in DHTML. For example, enter's keycode is 13. (Note: In fact, this is not very friendly, because you need to find the correspondence between the keyboard buttons and keycode when using it. If you use a shortcut key to set the control, it will be more perfect)
Text: String: some text descriptions may be required.
This is a relatively simple custom control application. It creates a class named hotkey and inherits from system. Web. UI. controls. Find the control object based on the target control ID: This. cachedtargetcontrol = This. namingcontainer. findcontrol (this. targetcontrolid );
Based on the above attributes, we can generate the corresponding client script, and then use the registerclientscriptblock method to output the script in the onprerender event of the override control.
The code is relatively simple:
Using system;
Using system. componentmodel;
Using system. text;
Using system. Web;
Using system. Web. UI;
Using system. Web. UI. design;
Using system. Web. UI. htmlcontrols;
Using system. Web. UI. webcontrols;
Namespace communityserver. Controls
{
/// <Summary>
/// Hotkey
/// Author: dotey
// Http://www.communityserver.cn
/// </Summary>
Public class hotkey: Control
{
Private Static readonly string scriptkey = "communityserver. Controls. hotkey ";
Public hotkey ()
{
}
Protected override void onprerender (eventargs E)
{
Base. onprerender (E );
String hotkeyfunctionscript = @"
<SCRIPT>
Function hotkey (event, targetobj, ctrlkey, shiftkey, altkey, keycode)
{
If (
Targetobj
& Event. ctrlkey = ctrlkey
& Event. shiftkey = shiftkey
& Event. altkey = altkey
& Event. keycode = keycode
)
Targetobj. Click ();
}
</SCRIPT>
";
If (! Page. isclientscriptblockregistered (scriptkey ))
{
This. Page. registerclientscriptblock (scriptkey, hotkeyfunctionscript );
}
String key = scriptkey + "-" + targetcontrol. clientid;
If (targetcontrol! = NULL &&! Page. isclientscriptblockregistered (key ))
{
This. Page. registerclientscriptblock (Key, createscript ());
}
}
Protected override void render (htmltextwriter writer)
{
Base. Render (writer );
Writer. Write (this. Text );
}
/// <Summary>
/// Generate scripts based on Attributes
/// </Summary>
/// <Returns> </returns>
Private string createscript ()
{
If (targetcontrol = NULL)
Return "";
String functionname = string. Format ("FN {0} keyup", targetcontrol. clientid );
Stringbuilder S = new stringbuilder ();
S. append ("<SCRIPT> \ n ");
S. appendformat ("function {0} (event) \ n", functionname );
S. append ("{\ n ");
S. appendformat ("\ tvar B = Document. getelementbyid ('{0}'); \ n", targetcontrol. clientid );
S. appendformat ("\ thotkey (event, B, {0}, {1}, {2}, {3}); \ n ",
This. ctrlkey. tostring (). tolower (),
This. shiftkey. tostring (). tolower (),
This. altkey. tostring (). tolower (),
This. keycode
);
S. append ("} \ n ");
S. append ("If (document. addeventlistener) \ n ");
S. appendformat ("\ tdocument. addeventlistener ('keyup', {0}, true); \ n", functionname );
S. append ("else \ n ");
S. appendformat ("\ tdocument. attachevent ('onkeyup', {0}); \ n", functionname );
S. append ("</SCRIPT> \ n ");
Return S. tostring ();
}
/// <Summary>
/// Target control
/// </Summary>
[
Category ("behavior "),
Defaultvalue (""),
]
Public Virtual string targetcontrolid
{
Get
{
Object savedstate = This. viewstate ["targetcontrolid"];
If (savedstate! = NULL)
{
Return (string) savedstate;
}
Return "";
}
Set
{
This. viewstate ["targetcontrolid"] = value;
This. cachedtargetcontrol = NULL;
}
}
/// <Summary>
/// Find the target control object based on the ID of the target control
/// </Summary>
Private control targetcontrol
{
Get
{
If (cachedtargetcontrol = NULL)
{
This. cachedtargetcontrol = This. namingcontainer. findcontrol (this. targetcontrolid );
}
Return this. cachedtargetcontrol;
}
}
Private control cachedtargetcontrol = NULL;
/// <Summary>
/// Text description
/// </Summary>
[
System. componentmodel. defaultvalue ("caption "),
]
Public Virtual string text
{
Get
{
Object state = viewstate ["text"];
If (State! = NULL)
{
Return (string) State;
}
Return "";
}
Set
{
Viewstate ["text"] = value;
}
}
/// <Summary>
/// Corresponds to event. keycode in DHTML. For example, enter's keycode is 13.
/// </Summary>
/// <Remarks>
/// In fact, this is not very friendly, because you need to find the corresponding relationship between the keyboard keys and keycode when using it. If you combine the control set with a shortcut key, it will be more perfect.
/// </Remarks>
Public int keycode
{
Get
{
Int keycode = 0;
Try
{
Keycode = convert. toint32 (viewstate ["keycode"]);
}
Catch {}
Return keycode;
}
Set
{
Viewstate ["keycode"] = value;
}
}
/// <Summary>
/// Whether to use the alt compound key
/// </Summary>
Public bool altkey
{
Get
{
Object state = viewstate ["altkey"];
If (State! = NULL)
{
Return (Boolean) State;
}
Return false;
}
Set
{
Viewstate ["altkey"] = value;
}
}
/// <Summary>
/// Whether to use the shift compound key
/// </Summary>
Public bool shiftkey
{
Get
{
Object state = viewstate ["shiftkey"];
If (State! = NULL)
{
Return (Boolean) State;
}
Return false;
}
Set
{
Viewstate ["shiftkey"] = value;
}
}
/// <Summary>
/// Whether to use the CTRL compound key
/// </Summary>
Public bool ctrlkey
{
Get
{
Object state = viewstate ["ctrlkey"];
If (State! = NULL)
{
Return (Boolean) State;
}
Return false;
}
Set
{
Viewstate ["ctrlkey"] = value;
}
}
}
}
Finally, it is easier to call:
Like a common Custom User Control:
<Asp: button runat = "server" id = "postbutton" cssclass = "txt3"> </ASP: button>
<CS: hotkey runat = "server" targetcontrolid = "postbutton" keycode = "13" ctrlkey = "true" text = "(CTRL + enter)"/>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
