Implementing shortcut keys in a webpage

Question

I was thinking of implementing shortcut keys in a pet web application, I am developing for me. I am using c# and asp.net.

I have seen very few web-sites( frankly I reme

Answer 1

If you enable this feature, make sure you can switch it on and off - be aware that your shortcuts may interfere or conflict with the built-in shortcuts that many of the assistive software packages out there (i.e. Jaws), and can be counterproductive in terms of accessibility.

Answer 2

Handling Keyboard Shortcuts in JavaScript

But I understand why few sites use it - this way has many difficulties. And encourage you to not use it too. Or not to make it as main feature.

Answer 3

Accesskeys are useless, but visit this site if you insist on using them. Much better to use this than javascript, though the ways of accessing access keys varies across browsers. The advantage of this over ugly Javascript solutions is that it leaves it up to the browser and the user's browser settings to handle them.

Answer 4

Mousetrap is an excellent JavaScript library for handling shortcut keys.

Based on how I've seen other apps (Gmail, JIRA) use shortcut keys, and based on my own experience, I would make a couple of suggestions:

• Interfering with browser shortcut keys is a real possibility. The most reliable way to avoid this is to use unmodified letters (i.e., A instead of Ctrl-A or Alt-A).
• Keyboard shortcuts are relatively rare for web sites, so they suffer from poor discoverability. Since they're not very discoverable, you'll need to add, e.g., tooltips or unobstrusive hints letting users know that they exist. Keyboard shortcuts seem to be most useful for web applications, like Gmail and JIRA, that are expected to be used heavily; otherwise, there's just not enough opportunity or benefit to learning them.

Answer 5

<script  type="text/javascript">
    if (window.captureEvents) {
        window.captureEvents(Event.KeyUp);
        window.onkeyup = executeCode;
    }
    else if (window.attachEvent) {
        document.attachEvent('onkeyup', executeCode);
    }

    function executeCode(evt) {
        if (evt == null) {
            evt = window.event;
        }
        var theKey = parseInt(evt.keyCode, 10);
        switch (theKey) {
            case 35:  // End
                document.getElementById("<%=btnSave.ClientID%>").click();
                //document.getElementById('ctl00_ContentPlaceHolder1_btnHome').click(); 

                break;
            case 36:  // F8
                document.getElementById('btnreset').click();
                break;
            case 120:  // F9
                // document.getElementById('Button1').click();

                break;
            case 87: //w
                if (window.event.altKey)
                    document.getElementById('buttonid').click();
                break;
        }
        evt.returnValue = false;
        return false;
    }

</script>


             <asp:Button ID="btnSave" runat="server" Text="Button"  />
           </asp:Content>

Answer 6

use this javascript on your master page this work using keycode.........


------------------------------------------ 

var isfocused=false;    
   document.onkeydown = overrideKeyboardEvent;
document.onkeyup = overrideKeyboardEvent;
var keyIsDown = {};
var get_focused="";
function overrideKeyboardEvent(e){
  switch(e.type){
    case "keydown":
      if(!keyIsDown[e.keyCode]){
        keyIsDown[e.keyCode] = true;
        // do key down stuff here
       if (e.keyCode == 40) {
                var t = new Array;
                t = document.getElementsByTagName("input");
                var n = "1";
                for (var r = 0; r < t.length; r++) {
                    if (t[r].type == "checkbox") {
                        var i = document.cookie.split(";");
                        var s = y = i[0].substr(i[0].indexOf("=") + 1);
                        if (s.toLowerCase().indexOf("active") != -1) {
                            if (n == "2") {
                                document.getElementById(t[r].id).focus();
                                document.cookie = "aa" + "=" + t[r].id;
                                return false
                            }
                            if (t[r].id == s) {
                                n = "2"
                            }
                        } else {
                            document.getElementById(t[r].id).focus();
                            document.cookie = "aa" + "=" + t[r].id;
                            return false
                        }
                    }
                }
            }
         if( e.keyCode==115)
        {    e.preventDefault();
             var c = new Array();
             c = document.getElementsByTagName('input');
             for (var i=0;i<c.length;i++)
             {
                 if(c[i].type=='submit' && c[i].value=='Submit' ||  c[i].type=='submit' && c[i].value=='Summary Report' )
                 {  
                    e.preventDefault();
                    document.getElementById(''+c[i].id+'').click();
                  }
             }

           return ;

        }
         if( e.keyCode==27 )
        {
           window.location = document.referrer;
        }
        if( e.keyCode==46 )
        {
           var c=new Array();
           c=document.getElementsByTagName('tr');
           for(var i=0;i<c.length;i++)
           {
                if(c[i].onclick!=null)
                {
                    if(c[i].onclick.toString().indexOf('OnUserSelected')!=-1 && c[i].onclick.toString().indexOf(''+get_focused+'')!=-1)
                    {       
                         var children =new Array();
                         if(c[i].innerHTML.indexOf('remove')!=-1)
                         {
                         children = c[i].innerHTML.split('remove');
                         var gg=children[1];
                         var get1=new Array();
                         get1=gg.split('id="');

                        // document.getElementById('ctl00_ContentPlaceHolder2_hidden111').value='1111';
                         var a= document.getElementById(''+get1[1]+'remove').click();
                         return false;
                       //__doPostBack(''+get1[1]+'remove','');
                        }
                        else
                        {
                            children = c[i].innerHTML.split('delete');
                         var gg=children[1];
                         var get1=new Array();
                         get1=gg.split('id="');

                        // document.getElementById('ctl00_ContentPlaceHolder2_hidden111').value='1111';
                         var a= document.getElementById(''+get1[1]+'d`enter code here`elete').click();
                         return false;
                        }


                    }
                }
           }
        }
         if( e.keyCode==112 )
        {   
            e.preventDefault();
            var c=new Array();
            c=document.getElementsByTagName('a');

            for(i=0;i<c.length;i++)
            {
                if(c[i].innerText.indexOf('Add New')!=-1 || c[i].innerText.indexOf('Back to')!=-1)
                {
                    window.location=''+c[i].href+'';
                }
            }

        }
         if( e.keyCode==113)
        {
            if(get_focused!="")
            {
                var c=new Array();
                c=document.getElementsByTagName('input');

                for(var i=0;i<c.length;i++)
                {
                if(c[i].type=='hidden')
                  {

                    if(c[i].id.indexOf('hidden111')!=-1)
                    {
                    document.getElementById(''+c[i].id+'').value='00';
                    document.getElementById(''+c[i].id+'').value=get_focused;
                         __doPostBack(c[i].id,"");
                    }
                  } 
                }


            }
        }
         if (e.keyCode == 38) {

                var t = new Array;
                t = document.getElementsByTagName("input");
                var n = "1";
                for (var r = 0; r < t.length; r++) {
                    if (t[r].type == "checkbox") {
                        var i = document.cookie.split(";");
                        var s = y = i[0].substr(i[0].indexOf("=") + 1);
                        if (s.toLowerCase().indexOf("active") != -1) {
                            if (t[r].id == s) {
                                n = "2"
                            }
                            if (n == "2") {
                                var f = 0;
                                while (f == 0) {
                                    if (t[r - 1].type == "checkbox") {
                                        f = 1
                                    } else {
                                        r--
                                    }
                                }
                                document.getElementById(t[r - 1].id).focus();
                                document.cookie = "aa" + "=" + t[r - 1].id;
                                return false
                            }
                        }
                    }
                }
            }
        }
    break;
    case "keyup":
      delete(keyIsDown[e.keyCode]);
      // do key up stuff here
    break;
  }

  //e.preventDefault();
  return true;
}
function disabledEventPropagation(e) {
    if (e) {
        if (e.stopPropagation) {
            e.stopPropagation()
        } else if (window.event) {
            window.event.cancelBubble = true
        }
    }
}
document.body.setAttribute("onunload","getdeleted()");
function getdeleted()
{
     document.cookie="aa" + "=" +"";
}
0
function OnUserSelected(source,eventArgs) {

                   if(document.getElementById('ctl00_ContentPlaceHolder2_hidden111').value!='1111')
                   { 

                      var hdnValueID = 'ctl00_ContentPlaceHolder2_hidden111';
                    try
                    {
                   document.getElementById(hdnValueID).value =source;

                    document.getElementById(hdnValueID).value = eventArgs;
                    __doPostBack(hdnValueID, "");
                    }

                    catch(errorr)

                    {
                        alert(errorr);
                    }
                  }
                else
                {
                   get_focused =eventArgs;

                     document.getElementById('ctl00_ContentPlaceHolder2_hidden111').value='';


                }
                    }