Phím tắt với jQuery


Câu trả lời:


142

Vì câu hỏi này ban đầu được hỏi, John Resig (tác giả chính của jQuery) đã rẽ nhánh và cải thiện dự án js-hotkeys. Phiên bản của anh ấy có sẵn tại:

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


6
Nó hỗ trợ metachìa khóa, một cái gì đó không được hỗ trợ trong js-hotkeys:) Cảm ơn
Lipis

Anh ấy có một gói Nuget, vì vậy tôi đã đi với gói này.
Sắp xếp

Tôi phải nói rằng, rất tốt cho các tổ hợp phím (đặc biệt là các phím đặc biệt như shift, ctrl, alt, ...) nhưng tôi gặp rắc rối với ánh xạ cơ bản 0-9 và az).
Martin

1
Câu trả lời này không cung cấp liên kết hữu ích. Bạn cũng có thể trả lời câu hỏi ban đầu? Ví dụ: "làm thế nào tôi có thể kết nối một sự kiện để kích hoạt nếu ai đó nhấn chữ g"? Mô-đun jquery.hotkeys có một số tài liệu, tôi chắc chắn sẽ rất tuyệt nếu bạn đã biết những gì bạn đang làm ... nhưng đối với những người trong chúng ta đang cố gắng hack một cái gì đó cùng nhau, một câu trả lời cho câu hỏi ban đầu sẽ rất tuyệt.
Ian Langmore

Làm thế nào để bạn ngăn chặn mặc định sủi bọt lên trình duyệt? Không có gì được đề cập trên readme từ những gì tôi thấy.
Gurnard

85

Những gì về Hotkey jQuery ?

jQuery Hotkeys cho phép bạn xem các sự kiện bàn phím ở bất cứ đâu trong mã của bạn hỗ trợ hầu hết mọi tổ hợp phím.

Để liên kết Ctrl+ cvới hàm ( f), ví dụ:

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

2
WOW ... đó có lẽ là plugin dễ nhất tôi từng sử dụng!
d -_- b

làm việc với điều này ra khỏi hộp nó không ngăn chặn mặc định trình duyệt. Vì vậy, Ctrl + n sẽ mở một tab mới trong trình duyệt. Không có quyền truy cập vào đối tượng sự kiện nên không chắc chắn làm thế nào để ngăn chặn Default với điều này.
Gurnard

@Gurnard Có lẽ chúng ta không nên ngăn chặn mặc định của người dùng, trừ những trường hợp hiếm hoi đã được thông báo trước cho người dùng và họ đang mong đợi hành vi đó trong ứng dụng web (và có thể cung cấp cài đặt để họ thay đổi). nếu không thì thật khó chịu. Ví dụ 1 : Khi soạn bài đăng trên Stack Exchange và thay vì che giấu các trình duyệt, Cmd H làm cho ## Heading ##xuất hiện trong lĩnh vực văn bản. Ví dụ 2 : Câu hỏi này. Ví dụ 3 : Câu hỏi và trả lời này .
Mentalist

2
@Mentalist Tôi đánh giá cao nhận xét về UX nhưng nó không áp dụng trong tình huống hiện tại của chúng tôi. Tôi chỉ muốn có thể thực hiện điều này về mặt kỹ thuật, các quyết định về kiến ​​trúc và UX sẽ là một bài khác :-)
Gurnard

43

Gần đây tôi đã viết một thư viện độc lập cho việc này. Nó không yêu cầu jQuery, nhưng bạn có thể sử dụng nó với jQuery không có vấn đề gì. Nó được gọi là Mousetrap.

Bạn có thể kiểm tra tại http://craig.is/killing/mice


4
Điều này là rất tốt đẹp. Tôi thực sự đánh giá cao sự hỗ trợ cho việc xử lý chuỗi phím.
lorefnon

2
Tôi đang sử dụng Moustrap và thấy nó tốt hơn rất nhiều plugin HotKeys. Rất khuyến khích. @Crag cảm ơn vì công việc tốt.
Primoz Rome

1
Tôi thích tài liệu cũng như cách ngăn chặn hành vi mặc định của các yếu tố. Thư viện này nên có trên NuGet.
Aamir

Đã đồng ý. Điều này là vượt trội. jquery.hotkey đã bắn không chính xác khi một vùng văn bản tập trung vào tôi, nhưng điều này đã không xảy ra. Ngoài ra, nó tốt hơn trong tất cả các cách mà các nhà bình luận trước đây đề cập.
erosebe

24

Vâng có nhiều cách. Nhưng tôi đoán bạn quan tâm đến việc thực hiện nâng cao. Vài ngày trước, tôi đã tìm kiếm và tôi đã tìm thấy một.

Đây.

Rất tốt để chụp các sự kiện từ bàn phím và bạn cũng sẽ tìm thấy các bản đồ nhân vật. Và điều tốt là ... đó là jQuery. Kiểm tra bản demo trên cùng một trang và quyết định.

Một thư viện thay thế là ở đây .


2
Chỉ cần làm cho nó rõ ràng, nó hoạt động hoàn hảo mà không cần jquery quá.
Diff.Thinkr

16

Nếu bạn chỉ muốn các phím tắt đơn giản (ví dụ như 1 chữ cái g), bạn có thể dễ dàng thực hiện mà không cần thêm plugin:

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

2
Điều này không hoạt động trong IE9. Trong IE, một cái gì đó như thế này hoạt động: e = e | | window.event; var keyCode = e.keyCode | | e.những gì;
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" />

Trang web này cho biết 71 = g nhưng mã jQuery ở trên lại nghĩ khác

Vốn G = 71 , chữ thường là 103


8
Dùng cái này! if (e.which == 103 || e.keyCode == 103 || window.event.keyCode == 103)
Chuyến đi

Điều này chỉ xảy ra khi bạn tập trung vào trường văn bản
Michael Koper

Liên kết đã chết :(

8

Bạn cũng có thể thử plugin jQuery ShortKeys . Ví dụ sử dụng:

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

3

Sau khi nghiên cứu một số jQuery tại Codeacademy, tôi đã tìm thấy một giải pháp để liên kết một khóa với thuộc tính animate. Toàn bộ ý tưởng là để hoạt hình mà không cuộn để nhảy từ phần này sang phần khác. Ví dụ từ Codeacademy là chuyển Mario qua DOM nhưng tôi đã áp dụng điều này cho các phần trang web của mình (CSS với chiều cao 100%). Đây là một phần của mã:

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

Tôi nghĩ rằng bạn có thể sử dụng điều này cho bất kỳ thư và tài sản.

Nguồn: http://www.codecademy.com/forum_questions/50e85b2714bd580ab300527e


1

Có một phiên bản mới của hotKeys.js hoạt động với phiên bản 1.10+ của jQuery. Nó là một tập tin javascript nhỏ, 100 dòng. 4kb hoặc chỉ giảm 2kb. Dưới đây là một số ví dụ sử dụng đơn giản là:

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

Sao chép repo từ github: https://github.com/realdanielbyrne/HoyKeys.git hoặc truy cập trang repo github https://github.com/realdanielbyrne/HoyKeys hoặc fork và đóng góp.



1

Tôi đã làm cho bạn nhấn phím! Đây là mã của tôi:

<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

Tôi đã cố gắng làm điều tương tự chính xác, tôi đã hoàn thành việc này sau một thời gian dài! Đây là mã tôi đã sử dụng! Nó hoạt động: Hoàn hảo! Điều này đã được Done bằng shortcuts.js thư viện! thêm một vài lần nhấn phím khác làm ví dụ!

Chỉ cần chạy mã snip-it, Nhấp vào bên trong hộp và bấm Gphím!

Lưu ý về điều đó ctrl+Fmeta+Fsẽ vô hiệu hóa tất cả keyboard shortcutsđể bạn phải tạo các phím tắt trong cùng một kịch bản! Ngoài ra các keyboard shortcuthành động chỉ có thể được gọi trong javascript!

Để chuyển đổi html để javascript, phphoặc ASP.netđi đây ! Để xem tất cả của tôi keyboard shortcutstrong một JSFIDDLE trực tiếp Bấm vào đây!

Cập nhật

    <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>
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.