Pintasan keyboard dengan jQuery

186

Bagaimana saya bisa mengirim acara ke api jika seseorang menekan surat itu g?

(Di mana peta karakter untuk semua huruf BTW?)

T Zengerink
sumber
3
Peta karakter untuk semua huruf di situs berkelas ini: rmhh.co.uk/ascii.html
Trevor
Situs lain yang bermanfaat untuk kode kunci adalah keycode.info
npad

Jawaban:

143

Sejak pertanyaan ini awalnya diajukan, John Resig (penulis utama jQuery) telah bercabang dan meningkatkan proyek js-hotkeys. Versinya tersedia di:

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

npad
sumber
6
Ini mendukung metakunci, sesuatu yang tidak didukung di js-hotkeys:) Terima kasih
Lipis
Dia memiliki paket Nuget, jadi saya pergi dengan yang ini.
Diselaraskan
Saya harus mengatakan, ini sangat bagus untuk kombinasi tombol (terutama tombol khusus seperti shift, ctrl, alt, ...) tapi saya mengalami masalah dengan pemetaan dasar 0-9 dan az).
Martin
1
Jawaban ini memang memberikan tautan yang bermanfaat. Bisakah Anda juga menjawab pertanyaan awal? Misal "bagaimana saya bisa mengirim acara ke api jika seseorang menekan huruf g"? Modul jquery.hotkeys memiliki beberapa dokumentasi, yang saya yakin bagus jika Anda sudah tahu apa yang Anda lakukan ... tetapi bagi kita yang mencoba meretas sesuatu bersama-sama, jawaban untuk pertanyaan awal akan sangat bagus.
Ian Langmore
Bagaimana Anda mencegah penggelembungan bawaan ke browser? Tidak ada yang disebutkan pada readme dari apa yang saya lihat.
Gurnard
86

Bagaimana dengan jQuery Hotkeys ?

jQuery Hotkeys memungkinkan Anda menonton acara keyboard di mana saja dalam kode Anda yang mendukung hampir semua kombinasi tombol.

Untuk mengikat Ctrl+ cke fungsi ( f), misalnya:

$(document).bind('keydown', 'ctrl+c', f);
Ionuț Staicu
sumber
2
WOW ... itu mungkin plugin termudah yang pernah saya gunakan!
d -_- b
bekerja dengan ini di luar kotak itu tidak mencegah default browser. Jadi Ctrl + n akan membuka tab baru di browser misalnya. Tidak ada akses ke objek acara jadi tidak yakin bagaimana cara mencegah Kerusakan dengan ini.
Gurnard
@Gurnard Kami mungkin seharusnya tidak mencegah default pengguna, kecuali dalam kasus yang jarang terjadi di mana telah dikomunikasikan kepada pengguna di muka dan mereka mengharapkan perilaku itu di dalam aplikasi web (dan mungkin memberikan pengaturan bagi mereka untuk mengubahnya). kalau tidak, itu sangat menjengkelkan. Contoh 1 : Saat membuat sebuah posting di Stack Exchange dan bukannya bersembunyi browser, Cmd H merek ## Heading ##muncul di bidang teks. Contoh 2 : Pertanyaan ini. Contoh 3 : Tanya Jawab ini .
Mentalist
2
@Mentalist Saya menghargai komentar UX tetapi tidak berlaku dalam situasi kita saat ini. Saya hanya ingin dapat melakukan ini secara teknis, keputusan arsitektur dan UX akan menjadi posting lain :-)
Gurnard
43

Baru-baru ini saya menulis perpustakaan mandiri untuk ini. Tidak memerlukan jQuery, tetapi Anda dapat menggunakannya dengan jQuery tanpa masalah. Ini disebut perangkap tikus.

Anda dapat memeriksanya di http://craig.is/killing/mice

Craig
sumber
4
Ini sangat bagus. Saya sangat menghargai dukungan untuk penanganan urutan tombol.
lorefnon
2
Saya menggunakan Moustrap dan merasa jauh lebih baik daripada plugin HotKeys. Sangat direkomendasikan @ Trag, terima kasih atas kerja bagusnya.
Primoz Rome
1
Saya menyukai dokumentasi serta cara untuk mencegah perilaku default elemen. Perpustakaan ini harus di NuGet.
Aamir
Sepakat. Ini lebih unggul. jquery.hotkey tidak salah menembak ketika textarea memiliki fokus untuk saya, tetapi ini tidak. Juga lebih baik dalam semua cara yang disebutkan komentator sebelumnya.
erosebe
24

Ya ada banyak cara. Tapi saya kira Anda tertarik pada implementasi lanjutan. Beberapa hari yang lalu saya dalam pencarian yang sama, dan saya menemukannya.

Sini.

Ini bagus untuk merekam acara dari keyboard dan Anda juga akan menemukan peta karakter. Dan hal baiknya adalah ... ini jQuery. Periksa demo di halaman yang sama dan putuskan.

Perpustakaan alternatif ada di sini .

cukup keras
sumber
2
Hanya untuk membuatnya jelas, ini berfungsi dengan baik tanpa jquery juga.
Diff.Thinkr
16

Jika Anda menginginkan pintasan sederhana (seperti 1 huruf, misalnya saja g), Anda dapat melakukannya dengan mudah tanpa plugin tambahan:

$(document).keypress(function(e) {
  if(e.charCode == 103) {
    // Your Code
  }
});
Michael Koper
sumber
2
Ini tidak berfungsi di IE9. Di IE, sesuatu seperti ini berfungsi: e = e || window.event; var keyCode = e.keyCode || e.yang;
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" />

situs ini mengatakan 71 = g tetapi kode jQuery di atas berpikir sebaliknya

Modal G = 71 , huruf kecil adalah 103

pemburu
sumber
8
Gunakan ini! if (e.which == 103 || e.keyCode == 103 || window.event.keyCode == 103)
Perjalanan
Ini hanya terjadi ketika Anda fokus pada bidang teks
Michael Koper
8

Anda juga dapat mencoba plugin shortKeys jQuery. Contoh penggunaan:

$(document).shortkeys({
  'g': function () { alert('g'); }
});
Brant Bobby
sumber
3

Setelah mempelajari beberapa jQuery di Codeacademy, saya menemukan solusi untuk mengikat kunci dengan properti bernyawa. Seluruh ide adalah untuk menghidupkan tanpa menggulir untuk melompat dari satu bagian ke bagian lain. Contoh dari Codeacademy adalah untuk memindahkan Mario melalui DOM tetapi saya menerapkan ini untuk bagian situs web saya (CSS dengan tinggi 100%). Ini adalah bagian dari kode:

$(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;
    }
});

Saya pikir Anda bisa menggunakan ini untuk surat dan properti apa pun.

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

Maikeximu
sumber
1

Ada versi baru hotKeys.js yang berfungsi dengan versi 1.10+ dari jQuery. Ini kecil, file javascript 100 baris. 4kb atau hanya 2kb yang diperkecil. Berikut adalah beberapa contoh penggunaan sederhana:

$('#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);

Klon repo dari github: https://github.com/realdanielbyrne/HoyKeys.git atau buka halaman repo github https://github.com/realdanielbyrne/HoyKeys atau fork dan berkontribusi.

realdanielbyrne
sumber
1

Mirip dengan @craig, saya baru-baru ini membangun perpustakaan cara pintas.

https://github.com/blainekasten/shortcut.js

API Chainable dengan dukungan untuk fungsi multple terikat pada satu pintasan.

Blaine Kasten
sumber
1

Saya telah menjadikan Anda tombol utama! Ini kode saya:

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

Omega universal
sumber
0

Saya sedang berusaha melakukan hal yang sama persis, saya menyelesaikan ini setelah waktu yang lama! Ini kode yang akhirnya saya gunakan! Berhasil: Sempurna! Ini Dilakukan dengan menggunakan perpustakaan shortcuts.js ! menambahkan beberapa penekanan tombol lainnya sebagai contoh!

Jalankan saja kode snip-it, Klik di dalam kotak dan tekan Gtombol!

Perhatikan pada ctrl+Fdan meta+Fyang akan menonaktifkan semua keyboard shortcutssehingga Anda harus membuat pintasan keyboard dalam skrip yang sama juga! juga keyboard shortcuttindakan hanya bisa dipanggil javascript!

Untuk mengkonversi html ke javascript, phpatau ASP.netpergi di sini ! Untuk melihat semua milik saya keyboard shortcutsdi JSFIDDLE langsung, Klik Di Sini!

Memperbarui

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