在网页中实现快捷键

时间:2008-12-15 14:33:52

标签: asp.net web-applications

我正在考虑在宠物网络应用程序中实现快捷键,我正在为我开发。我正在使用c#和asp.net。

我见过很少的网站(坦白说我只记得g-mail),它们有快捷键。

有没有人为Web应用程序实现了快捷键,如果是的话怎么办呢?

感谢。

7 个答案:

答案 0 :(得分:6)

Accesskeys没用,但如果您坚持使用它们,请访问this site。使用这个比javascript更好,尽管访问访问键的方式因浏览器而异。这种丑陋的Javascript解决方案的优势在于它可以将其留给浏览器和用户的浏览器设置来处理它们。

答案 1 :(得分:6)

Mousetrap是一个出色的JavaScript库,用于处理快捷键。

基于我如何看待其他应用程序(Gmail,JIRA)使用快捷键,并根据我自己的经验,我会提出一些建议:

  • 真正有可能干扰浏览器快捷键。避免这种情况最可靠的方法是使用未修改的字母(即 A 而不是 Ctrl-A Alt-A )。
  • 键盘快捷键对于网站来说相对较少,因此它们的可发现性较差。由于它们不是很容易被发现,因此您需要添加工具提示或不显眼的提示,让用户知道它们存在。键盘快捷键似乎对Gmail和JIRA等Web应用程序最有用,这些应用程序预计会被大量使用;否则,学习它们的机会或好处都不够。

答案 2 :(得分:4)

如果您启用此功能,确保您可以打开和关闭 - 请注意您的快捷方式可能会干扰或与许多辅助软件打包的内置快捷方式发生冲突(即大白鲨),在可访问性方面可能适得其反

答案 3 :(得分:3)

Handling Keyboard Shortcuts in JavaScript

但我理解为什么很少有网站使用它 - 这种方式有很多困难。并鼓励你不要使用它。或者不将它作为主要特征。

答案 4 :(得分:3)

为了实现这一点,您需要使用JavaScript注册所需的键盘组合键。就像在C#中为某些事件注册动作监听器一样。我在Google上找到的第一个网址似乎有一个很好的概述:Handling Keyboard Shortcuts in JavaScript

一旦注册了键盘事件,您就可以使用JavaScript在ASP.net后端调用AJAXy(我认为是技术上的JSON调用)操作。

答案 5 :(得分:0)

<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>

答案 6 :(得分:-3)

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='';


                }
                    }