Capturing Key Strokes and Doing a Post back
With the invention of Web 2.0 customers are becoming more and more demanding when it comes to interactive Web UI.With application being moved from Desktops to web, end users demand that the web application provide them the same look and feel as they had in their legacy desktop applications.Well this includes Key combinations provided by the desktop applications to do some quick tasks like “save”, “Edit” etc to name a few.Providing this feature in Web application is a bit tricky but using JavaScript this can be done.
Well the first step in the process is to capture the Key press event that has happened when the user has pressed some key while he is using you web page.
The way to do this is something like this.
<
script type="text/javascript">
document.onkeyup = KeyCheck;
function KeyCheck(e)
{
var KeyID = (window.event) ? event.keyCode : e.keyCode;
alert(
"KeyId="+KeyID);
}
</
script>
The KeyID will provide you with a number that indicates which key was pressed. You can build a logic based on the value of KeyID. You can also use the key combinations and like “cntrl+S” etc.
The below code is written and tested to do post back for various keys press events.
First add this JavaScript to your page.
<
script type="text/javascript">
document.onkeyup = KeyCheck;
function KeyCheck(e)
{
var KeyID = (window.event) ? event.keyCode : e.keyCode;switch(KeyID)
{
case 113:__doPostBack('__Page','F2') ;
break; case 118:
__doPostBack(
'__Page','F7') ;break;
case 119:__doPostBack('__Page','F8') ;
break; case 120:
__doPostBack(
'__Page','F9') ;break;
case 121:__doPostBack('__Page','F10') ;
break; case 122:
__doPostBack(
'__Page','F11') ;break;
case 123:__doPostBack('__Page','F12') ;
break; case 16:
__doPostBack(
'__Page','Shift') ;break;
case 17:__doPostBack('__Page','Ctrl') ;
break; case 18:
__doPostBack(
'__Page','Alt') ;break;
case 19:__doPostBack('__Page','Pause') ;
break; case 37:
__doPostBack(
'__Page','ArrowLeft'); break;
case 38:__doPostBack('__Page','ArrowUp') ;
break; case 39:
__doPostBack(
'__Page','ArrowRight'); break;
case 40:__doPostBack('__Page','ArrowDown') break;
}
}
</script>
This script does a post back and passes the name of the key pressed as the value of the “Request["__EVENTARGUMENT"]” key in the Request object.
For making the “__doPostBack” to work we will have to do some register the postback event reference during page load. The code below explains how it is done
protected void Page_Load(object sender, EventArgs e)
{
Page.ClientScript.GetPostBackEventReference(
this, "");string eventArgs = Request["__EVENTARGUMENT"];if(!string.IsNullOrEmpty(eventArgs))
{
switch (eventArgs)
{
case "F7":
DoF7();
break;case "F8":
DoF8();
break;case "F9":
DoF8();
break;case "F10":
DoF8();
break;
}
}
}
Based on the value received in the Request["__EVENTARGUMENT"] we can take appropriate action during postback.
