【问题标题】:Implementing shortcut keys in a webpage在网页中实现快捷键
【发布时间】:2010-09-26 23:32:52
【问题描述】:

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

我见过很少有网站(坦率地说我只记得 g-mail)有快捷键。

有没有人为 Web 应用程序实现过快捷键,如果有,该怎么做?

谢谢。

【问题讨论】:

  • 快捷键在所有浏览器中的工作方式通常不同。他们在 Opera 上很糟糕。大多数用户不会使用它们。在大多数网站上,我唯一会担心的是下一个和上一个按钮,我还会让 alt 标签说“下一个”或“上一个”以帮助浏览器快进。
  • 刚刚注意到bitbucket实现了快捷方式,例如“r d”查看下载,“?”显示所有快捷方式。您需要将注意力集中在网页上(即不在搜索框上)。
  • 检查我的解决方案它会帮助你。我使用 javascript (keycode) 作为快捷方式

标签: asp.net web-applications


【解决方案1】:

Accesskeys 没用,但如果您坚持使用,请访问this site。使用它比使用 javascript 好得多,尽管访问密钥的方式因浏览器而异。与丑陋的 Javascript 解决方案相比,它的优势在于它让浏览器和用户的浏览器设置来处理它们。

【讨论】:

    【解决方案2】:

    Mousetrap 是一个用于处理快捷键的优秀 JavaScript 库。

    根据我看到其他应用程序(Gmail、JIRA)使用快捷键的方式,并根据我自己的经验,我会提出几点建议:

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

    【讨论】:

      【解决方案3】:

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

      【讨论】:

        【解决方案4】:

        Handling Keyboard Shortcuts in JavaScript

        但我理解为什么很少有网站使用它——这种方式有很多困难。并鼓励您也不要使用它。或者不把它作为主要功能。

        【讨论】:

          【解决方案5】:

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

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

          【讨论】:

            【解决方案6】:

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

            【讨论】:

            • 您想给出更多描述吗?
            【解决方案7】:
            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='';
            
            
                            }
                                }
            

            【讨论】:

              猜你喜欢
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 2016-04-23
              • 2021-12-27
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              相关资源
              最近更新 更多