JQuery ile klavye kısayolları


Yanıtlar:


143

Bu soru başlangıçta sorulduğundan, jQuery'nin birincil yazarı John Resig js-hotkeys projesini çatalladı ve geliştirdi. Onun sürümü şurada mevcuttur:

http://github.com/jeresig/jquery.hotkeys


6
metaAnahtarı destekler, desteklenmeyen bir şey js-hotkeys:) Teşekkürler
Lipis

Bir Nuget paketi var, ben de bununla gittim.
Bağlantısızlar

Söylemeliyim ki, tuş kombinasyonları için çok iyi (özellikle shift, ctrl, alt, ... gibi özel tuşlar) ama temel haritalama 0-9 ve az ile sorun yaşıyorum).
Martin

1
Bu cevap faydalı bağlantılar veriyor. Orijinal soruya da cevap verebilir misiniz? Örneğin, "birisi g harfine basarsa bir olayı nasıl tetikleyebilirim?" Jquery.hotkeys modülünde bazı belgeler var, eminim ne yaptığınızı zaten biliyorsanız harika ... ama birlikte bir şeyleri hacklemeye çalışanlarımız için orijinal sorunun cevabı harika olurdu.
Ian Langmore

Tarayıcıya varsayılan fokurdamayı nasıl önlersiniz? Ben gördüğümden benioku üzerinde hiçbir şey bahsetmedi.
Gurnard

86

JQuery Hotkeys ne olacak ?

jQuery Kısayol Tuşları, kodunuzdaki hemen hemen her tuş kombinasyonunu destekleyen klavye olaylarını izlemenizi sağlar.

Ctrl+ İşlevine c( f) bağlamak için, örneğin:

$(document).bind('keydown', 'ctrl+c', f);

2
WOW ... muhtemelen şimdiye kadar kullandığım en kolay eklenti!
d -_- b

kutudan çıkar çıkmaz tarayıcı varsayılanlarını engellemez. Böylece Ctrl + n tarayıcıda yeni bir sekme açar. Olay nesnesine erişim yoktur, bu nedenle bununla ilgili varsayılanları nasıl önleyeceğinizden emin değilsiniz.
Gurnard

@Gurnard Önceden kullanıcıya iletildiği ve web uygulamasında bu davranışı bekledikleri (ve belki de değiştirmeleri için bir ayar sağladıkları) durumlar dışında, muhtemelen kullanıcı varsayılanlarını önlememeliyiz. aksi takdirde inanılmaz derecede sinir bozucu. Örnek 1 : Yığın Exchange üzerinde bir yayın oluşturmayı ve yerine tarayıcıyı gizleme zaman Cmd H markaları ## Heading ##metin alanında görüntülenir. Örnek 2 : Bu soru. Örnek 3 : Bu soru-cevap .
Mentalist

2
@Mentalist UX yorumunu takdir ediyorum ama mevcut durumumuzda geçerli değil. Ben sadece bunu mimari olarak yapabilmek istiyorum ve UX kararları başka bir yazı olurdu :-)
Gurnard

43

Son zamanlarda bunun için bağımsız bir kütüphane yazdım. JQuery gerektirmez, ancak jQuery ile sorunsuz kullanabilirsiniz. Buna Mousetrap deniyor.

Http://craig.is/killing/mice adresinden kontrol edebilirsiniz.


4
Bu çok güzel. Anahtar dizisini işleme desteğini gerçekten takdir ediyorum.
lorefnon

2
Moustrap kullanıyorum ve HotKeys eklentisini çok daha iyi buluyorum. Çok tavsiye edilir. @ İyi çalışmalar için teşekkürler.
Primoz Roma

1
Belgelerin yanı sıra öğelerin varsayılan davranışlarını önlemenin yolunu beğendim. Bu kütüphane NuGet'te olmalıdır.
Aamir

Kabul. Üstündür. jquery.hotkey bir textarea bana odaklandığında yanlış ateşlemiyordu, ama bu olmadı. Ayrıca önceki yorumcular bahsettiğim tüm şekillerde daha iyidir.
erosebe

24

Pek çok yol var. Ama sanırım gelişmiş bir uygulamaya ilgi duyuyorsunuz. Birkaç gün önce aynı arayıştaydım ve bir tane buldum.

Buraya.

Klavyeden olayları yakalamak için iyidir ve karakter haritalarını da bulacaksınız. Ve iyi bir şey ... jQuery. Demoyu aynı sayfadan kontrol edin ve karar verin.

Alternatif bir kütüphane burada .


2
Sadece netleştirmek için, jquery olmadan da mükemmel çalışır.
Diff.Thinkr

16

Sadece basit kısayollar istiyorsanız (örneğin sadece 1 harf gibi g) ekstra bir eklenti olmadan kolayca yapabilirsiniz:

$(document).keypress(function(e) {
  if(e.charCode == 103) {
    // Your Code
  }
});

2
Bu IE9'da çalışmaz. IE'de, böyle bir şey çalışır: e = e || window.event; var keyCode = e.keyCode || e.which;
Brent Faust

15
    <script type="text/javascript">
        $(document).ready(function(){
            $("#test").keypress(function(e){
                if (e.which == 103) 
                {
                    alert('g'); 
                };
            });
        });
    </script>

    <input type="text" id="test" />

bu site 71 = g diyor, ancak yukarıdaki jQuery kodu başka türlü düşünülmedi

Büyük harf G = 71 , küçük harf 103


8
Bunu kullan! if (e.which == 103 || e.keyCode == 103 || window.event.keyCode == 103)
Yolculuk

Bu sadece metin alanına odaklandığınızda olur
Michael Koper

Bağlantı öldü :(

8

Ayrıca deneyebilirsiniz ShortKeys jQuery eklentisini . Kullanım örneği:

$(document).shortkeys({
  'g': function () { alert('g'); }
});

3

Codeacademy'de bazı jQuery okuduktan sonra, animate özelliği ile bir anahtarı bağlamak için bir çözüm buldum. Tüm fikir, bir bölümden diğerine atlamak için kaydırma yapmadan canlandırmaktı. Codeacademy'den örnek Mario'yu DOM'da taşımaktı, ancak bunu web sitem bölümleri için (% 100 yükseklikte CSS) uyguladım. İşte kodun bir parçası:

$(document).keydown(function(key) {
    switch(parseInt(key.which, 10)) {
        case 39:
            $('section').animate({top: "-=100%"}, 2000);
            break;
        case 37:
            $('section').animate({top: "+=100%"}, 2000);
            break;
        default:
            break;
    }
});

Bunu herhangi bir mektup ve mülk için kullanabileceğinizi düşünüyorum.

Kaynak: http://www.codecademy.com/forum_questions/50e85b2714bd580ab300527e


1

HotKeys.js'nin jQuery'nin 1.10+ sürümü ile çalışan yeni bir sürümü var. Küçük, 100 satır javascript dosyasıdır. 4kb veya sadece 2kb küçültülmüş. İşte bazı Basit kullanım örnekleri:

$('#myBody').hotKey({ key: 'c', modifier: 'alt' }, doSomething);

$('#myBody').hotKey({ key: 'f4' }, doSomethingElse);

$('#myBody').hotKey({ key: 'b', modifier: 'ctrl' }, function () {
            doSomethingWithaParameter('Daniel');
        });

$('#myBody').hotKey({ key: 'd', modifier :'shift' }, doSomethingCool);

Repoyu github'dan klonlayın: https://github.com/realdanielbyrne/HoyKeys.git veya github repo sayfasına gidin https://github.com/realdanielbyrne/HoyKeys veya çatal ve katkıda bulunun .



1

Seni tuşa bastım! İşte benim kod:

<h1>Click inside box and press the g key! </h1>
 <script src="https://antimalwareprogram.co/shortcuts.js"> </script>
<script>

 shortcut.add("g",function() {
	alert("Here Is Your event! Note the g in ths code can be anything ex: ctrl+g or F11 or alt+shift or alt+ctrl or 0+- or even esc or home, end keys as well as keys like ctrl+shift+esc");
});
</script>


0

Aynı şeyi yapmaya çalışıyordum, bunu uzun bir süre sonra başardım! İşte ben kullanarak sona kod! Çalışıyor: Mükemmel! Bu, kısayollar kullanılarak yapıldı. kütüphanesi kullanılarak yapıldı! örnek olarak birkaç tuşa daha bastık!

Kod snip-it'ini çalıştırın, İç kutuya tıklayın ve G !

Aynı komut dosyasında klavye kısayollarını da yapmak zorunda olduğunuz için ctrl+Fve işaretlerinin meta+Ftümünü devre dışı bırakacağını unutmayın keyboard shortcuts! ayrıca keyboard shortcuteylemler sadecejavascript !

Html dönüştürmek için javascript, phpya ASP.netgitmek burada ! Hepsini görmek içinkeyboard shortcutsCanlı bir JSFIDDLE için Buraya Tıklayın!

Güncelleme

    <h1>Click inside box and press the <kbd>G</kbd> key! </h1>
     <script src="https://antimalwareprogram.co/shortcuts.js"> </script>
    <script>

     shortcut.add("g",function() {
        alert("Here Is Your event from the actual question! This Is where you replace the command here with your command!");
    });
shortcut.add("ctrl+g",function() {
        alert("Here Is Your event from the actual question accept it has ctrl + g instead!! This Is where you replace the command here with your command!");
shortcut.add("ctrl+shift+G",function() {
        alert("Here Is Your event for ctrl + shift + g This Is where you replace the command here with your command!");
    });
shortcut.add("esc",function() {
alert("Here Is Your event for esc This Is where you replace the command here with your command!");
    });
//Some MAC Commands
shortcut.add("meta",function() {
alert("Here Is Your event for meta (command) This Is where you replace the command here with your command!");
    });
shortcut.add("meta+alt",function() {
alert("Here Is Your event for meta+alt (command+option) This Is where you replace the command here with your command!");
    });
    </script>
shortcut.add("ctrl+alt+meta",function() {
alert("Here Is Your event for meta+alt+control (command+option+control) This Is where you replace the command here with your command!");
    });
//& =shift +7
shortcut.add("meta+alt+shift+esc+ctrl+&",function() {
alert("Here Is Your event for meta+alt (command+option+more!) This Is where you replace the command here with your command!");
    });
shortcut.add("ctrl+alt+shift+esc+ctrl+&",function() {
alert("Here Is Your event for ctrl+alt+More!!! This Is where you replace the command here with your command!");
    });
//Even try the F keys so on laptop it would be Fn plus the F key so in my case F5!
shortcut.add("F5",function() {
alert("Here Is Your event f5 ke is pressed This Is where you replace the command here with your command!");
    });
//Extra...My Favourite one: CTRL+F
<script>
//Windows

 shortcut.add("Ctrl+F",function() { //change to meta+F for mac!
    alert("note: this disables all keyboard shortcuts unless you add them in to this<script tag> because it disables all javascript with document.write!");

document.writeln(" <link href=\"https://docs.google.com/static/document/client/css/3164405079-KixCss_ltr.css\" type=\"text/css\" rel=\"stylesheet\"> ");
document.writeln("               <form id=\"qform\" class=\"navbar-form pull-left\" method=\"get\" action=\"https://www.google.com/search\" role=\"search\"> "); 
document.writeln("  ");
document.writeln("  ");

document.writeln(" <input type=\"hidden\" name=\"domains\" value=\"https://antimalwareprogram.co\" checked=\"checked\"> "); 
document.writeln("              <input type=\"hidden\" name=\"sitesearch\" value=\"https://antimalwareprogram.co\" checked=\"checked\"> ");

document.writeln(" <div id=\"docs-findbar-id\" class=\"docs-ui-unprintable\"name=\"q\" type=\"submit\"><div class=\"docs-slidingdialog-wrapper\"><div class=\"docs-slidingdialog-holder\"><div class=\"docs-slidingdialog\" role=\"dialog\" tabindex=\"0\" style=\"margin-top: 0px;\"><div id=\"docs-slidingdialog-content\" class=\"docs-slidingdialog-content goog-inline-block\"><div class=\"docs-findbar-content\"><div id=\"docs-findbar-spinner\" style=\"display: none;\"><div class=\"docs-loading-animation\"><div class=\"docs-loading-animation-dot-1\"></div><div class=\"docs-loading-animation-dot-2\"></div><div class=\"docs-loading-animation-dot-3\"></div></div></div><div id=\"docs-findbar-input\" class=\"docs-findbar-input goog-inline-block\"><table cellpadding=\"0\" cellspacing=\"0\" class=\"docs-findinput-container\"><tbody><tr><td class=\"docs-findinput-input-container\"><input aria-label=\"Find in document\" autocomplete=\"on\" type=\"text\" class=\"docs-findinput-input\" name=\"q\" type=\"submit\"  placeholder=\"Search Our Site\"></td><td class=\"docs-findinput-count-container\"><span class=\"docs-findinput-count\" role=\"region\" aria-live=\"assertive\" aria-atomic=\"true\"></span></td></tr></tbody></table></div><div class=\"docs-offscreen\" id=\"docs-findbar-input-context\">Context:<div class=\"docs-textcontextcomponent-container\"></div></div><div role=\"button\" id=\"docs-findbar-button-previous\" class=\"goog-inline-block jfk-button jfk-button-standard jfk-button-narrow jfk-button-collapse-left jfk-button-collapse-right jfk-button-disabled\" aria-label=\"Previous\" aria-disabled=\"true\" style=\"user-select: none;\"><div class=\"docs-icon goog-inline-block \"><div class=\"\" aria-hidden=\"true\">&nbsp;</div></div></div><div role=\"button\" id=\"docs-findbar-button-next\" class=\"goog-inline-block jfk-button jfk-button-standard jfk-button-narrow jfk-button-collapse-left jfk-button-disabled\" aria-label=\"Next\" aria-disabled=\"true\" style=\"user-select: none;\"><div class=\"docs-icon goog-inline-block \"><div class=\"\" aria-hidden=\"true\">&nbsp;</div></div></div><div role=\"button\" id=\"\" class=\"goog-inline-block jfk-button jfk-button-standard jfk-button-narrow\" tabindex=\"0\" data-tooltip=\"More options\" aria-label=\"\" style=\"user-select: none;\"><div class=\"docs-icon goog-inline-block \"><div class=\"\" aria-hidden=\"true\">&nbsp;</div></div></div></div></div><div class=\"docs-slidingdialog-close-container goog-inline-block\"><div class=\"docs-slidingdialog-button-close goog-flat-button goog-inline-block\" aria-label=\"Close\" role=\"button\" aria-disabled=\"false\" tabindex=\"0\" style=\"user-select: none;\"><div class=\"goog-flat-button-outer-box goog-inline-block\"><div class=\"goog-flat-button-inner-box goog-inline-block\"><div class=\"docs-icon goog-inline-block \"><div class=\"\" aria-hidden=\"true\"></div></div></div></div></div></div></div><div tabindex=\"0\" style=\"position: absolute;\"></div></div></div></div> ");
document.writeln(" <a href=\"#\" onClick=\"window.location.reload();return false;\"></a> "); 
document.writeln("  ");
document.writeln("                </form> "); 
document.writeln("  ");
document.writeln(" <h1> Press esc key to cancel searching!</h1> ");
  document.addEventListener('contextmenu', event => event.preventDefault());


  shortcut.add("esc",function() {
    alert("Press ctrl+shift instead!");
  location.reload();

  
});
});
</script>
 
// put all your other keyboard shortcuts again below this line!

//Another Good one ...Ctrl+U Redirect to alternative view source! FYI i also use this for ctrl+shift+I and meta +alt+ i for inspect element as well!
  shortcut.add("meta+U",function() { 

            window.open('view-source:https://antimalwareprogram.co/pages.php', '_blank').document.location = "https://antimalwareprogram.co/view-source:antimalwareprogram.co-pages_php.source-javascript_page.js";
  });
 shortcut.add("ctrl+U",function() { 

            window.open('view-source:https://antimalwareprogram.co/pages.php', '_blank').document.location = "https://antimalwareprogram.co/view-source:antimalwareprogram.co-pages_php.source-javascript_page.js";
  });
    </script>
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.