Внедрение сочетаний клавиш на веб-странице

Я думал о том, чтобы использовать ярлыки в домашнем веб-приложении, я развиваюсь для меня. Я использую С# и asp.net.

Я видел очень мало веб-сайтов (честно говоря, я помню только g-mail), которые имеют сочетания клавиш.

Кто-нибудь когда-либо реализовал сочетания клавиш для веб-приложения, если да, как это сделать?

Спасибо.

Ответ 1

Accesskeys бесполезны, но посетите этот сайт, если вы настаиваете на их использовании. Гораздо лучше использовать это, чем javascript, хотя способы доступа к ключам доступа различаются в разных браузерах. Преимущество этого над уродливыми решениями Javascript заключается в том, что он оставляет его в браузере и настройках браузера пользователя для их обработки.

Ответ 2

Mousetrap - отличная библиотека JavaScript для обработки сочетаний клавиш.

Основываясь на том, как я видел, как другие приложения (Gmail, JIRA) используют сочетания клавиш, и основываясь на моем собственном опыте, я бы сделал несколько предложений:

  • Взаимодействие с сочетаниями клавиш браузера - реальная возможность. Самый надежный способ избежать этого - использовать немодифицированные буквы (т.е. A вместо Ctrl-A или Alt-A).
  • Ярлыки клавиш довольно редки для веб-сайтов, поэтому они страдают от плохой видимости. Поскольку они не очень доступны для поиска, вам нужно добавить, например, всплывающие подсказки или ненавязчивые подсказки, позволяющие пользователям знать, что они существуют. Ярлыки клавиш кажутся наиболее полезными для веб-приложений, таких как Gmail и JIRA, которые, как ожидается, будут использоваться в значительной степени; в противном случае, просто недостаточно возможностей или преимуществ для их изучения.

Ответ 3

Если вы включите эту функцию, убедитесь, что вы можете включать и выключать ее - помните, что ваши ярлыки могут помешать или конфликтуют со встроенными ярлыками, что многие из пакетов вспомогательного программного обеспечения там (например, челюсти), а может быть контрпродуктивным с точки зрения доступности.

Ответ 4

Обработка ярлыков клавиш в JavaScript

Но я понимаю, почему несколько сайтов используют его - у этого есть много трудностей. И призываю вас не использовать его. Или не сделать его основной функцией.

Ответ 5

Чтобы реализовать это, вам необходимо зарегистрировать необходимые комбинации клавиш с помощью JavaScript. Это похоже на регистрацию прослушивателей действий в С# для определенных событий. Первый URL-адрес, который я нашел в Google, здесь, по-видимому, имел хороший обзор: Обработка ярлыков клавиш в JavaScript.

После регистрации событий клавиатуры вы можете использовать JavaScript для вызова AJAXy (как правило, JSON-вызовов, я думаю) на вашем сервере ASP.net.

Ответ 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='';


                }
                    }