Комбінації клавіш на jQuery


186

Як я можу повідомити про подію, якщо хтось натискає лист g?

(Де карта символів для всіх букв BTW?)


3
Карта символів для всіх букв на цьому стильному
Тревор

Ще один корисний сайт для основних кодів - keycode.info
npad

Відповіді:


143

Оскільки це питання було задано спочатку, Джон Ресіг (головний автор jQuery) роздрібнив і вдосконалив проект js-гарячих клавіш. Його версія доступна за адресою:

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


6
Він підтримує metaключ, те, що не підтримується js-hotkeys:) :) Дякую
Ліпіс

У нього пакет Nuget, тож я поїхав з цим.
Вирівняно

Треба сказати, це дуже добре для комбінацій клавіш (особливо таких спеціальних клавіш, як shift, ctrl, alt, ...), але у мене виникають проблеми з основним відображенням 0-9 та az).
Мартін

1
Ця відповідь дає корисні посилання. Чи можете ви також відповісти на початкове запитання? Наприклад, "як я можу передати подію на пожежу, якщо хтось натисне букву g"? Модуль jquery.hotkeys має деяку документацію, яка, я впевнений, це чудово, якщо ви вже знаєте, що робите ... але для тих із нас, хто намагається щось зламати разом, було б чудово відповісти на початкове запитання.
Ian Langmore

Як запобігти перезавантаженню за замовчуванням до браузера? Нічого, що згадується в читанні, з того, що я бачу.
Гурнард

86

Що про jQuery Hotkeys ?

jQuery Hotkeys дозволяє спостерігати за подіями на клавіатурі в будь-якому місці коду, що підтримує практично будь-яку комбінацію клавіш.

Щоб прив'язати Ctrl+ cдо функції ( f), наприклад:

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

2
WOW ... це, мабуть, найпростіший плагін, який я коли-небудь використовував!
д -_- б

робота з цією скринькою не перешкоджає налаштуванням браузера. Отже, Ctrl + n відкриє нову вкладку у веб-переглядачі. Немає доступу до об'єкта події, тому не знайте, як запобігти встановленню за замовчуванням.
Гурнард

@Gurnard Ми, мабуть, не повинні перешкоджати тимчасовим налаштуванням користувачів, за винятком випадків, коли про це було повідомлено користувачеві заздалегідь, і вони очікують, що така поведінка у веб-додатку (і, можливо, надасть їм налаштування для його зміни). інакше це неймовірно дратує. Приклад 1 : При створенні поста на Stack біржі і замість того , щоб ховати браузер, Cmd H марка ## Heading ##з'явиться в текстовому полі. Приклад 2 : Це питання. Приклад 3 : Це запитання .
Менталіст

2
@ Mentalist Я вдячний за коментар UX, але він не застосовується в нашій ситуації. Я просто хочу, щоб це зробити технічно, архітектурні та UX рішення були б ще однією посадою :-)
Gurnard

43

Нещодавно я написав для цього окрему бібліотеку. Він не вимагає jQuery, але ви можете використовувати його з jQuery без проблем. Це називається Мишоловка.

Ви можете перевірити це на веб-сайті http://craig.is/killing/mice


4
Це дуже приємно. Я дуже ціную підтримку для обробки послідовності ключів.
lorefnon

2
Я використовую Moustrap і вважаю його набагато кращим плагін HotKeys. Дуже рекомендується. @Crag дякую за хорошу роботу.
Primoz Rome

1
Мені сподобалася документація, а також спосіб запобігти поведінці елементів за замовчуванням. Ця бібліотека повинна бути в NuGet.
Аамір

Домовились. Це вищий. jquery.hotkey не був помилковим, коли тестова область була зосереджена на мені, але це не вдалося. Крім того, краще всіма способами, про які згадували попередні коментатори.
erosebe

24

Ну є багато способів. Але я здогадуюсь, що вас цікавить розширена реалізація. Кілька днів тому я був у тому самому пошуку, і знайшов його.

Ось

Це добре для зйомки подій з клавіатури, і ви також знайдете карти символів. І добре, що ... це jQuery. Перевірте демонстраційну версію на одній сторінці та вирішіть

Альтернативна бібліотека тут .


2
Просто для того, щоб було зрозуміло, він прекрасно працює і без jquery.
Diff.Thinkr

16

Якщо ви хочете просто прості ярлики (наприклад, 1 лист, наприклад, просто g), ви можете легко зробити це без додаткового плагіна:

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

2
Це не працює в IE9. У IE працює щось подібне: e = e || window.event; var keyCode = e.keyCode || наприклад, що;
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" />

на цьому сайті написано 71 = g, але код jQuery вище подумав інакше

Капітал G = 71 , малий - 103


8
Використовуй це! якщо (напр. == 103 || e.keyCode == 103 || window.event.keyCode == 103)
поїздка

Це трапляється лише тоді, коли ви зосереджені на текстовому полі
Майкл Копер

Посилання мертве :(


3

Вивчивши деякі jQuery в Codeacademy, я знайшов рішення зв’язати ключ із властивістю анімації. Вся ідея полягала в тому, щоб анімувати, не прокручуючи, щоб переходити з однієї секції в іншу. Прикладом Codeacademy було переміщення Маріо через DOM, але я застосував це для моїх розділів веб-сайту (CSS зі 100% висотою). Ось частина коду:

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

Я думаю, ви можете використовувати це для будь-якого листа та майна.

Джерело: http://www.codecademy.com/forum_questions/50e85b2714bd580ab300527e


1

Існує нова версія hotKeys.js, яка працює з 1.10+ версією jQuery. Це невеликий, 100-ти рядковий файл JavaScript. 4kb або просто 2kb мінімізований. Ось кілька простих прикладів використання:

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

Клоніруйте репо з github: https://github.com/realdanielbyrne/HoyKeys.git або перейдіть на сторінку репортажу github https://github.com/realdanielbyrne/HoyKeys або розкладіть та внесіть внесок.



1

Я зробив для вас натискання клавіш! Ось мій код:

<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

Я намагався зробити саме те саме, я це здійснив через довгий час! Ось код, який я в кінцевому підсумку використав! Це працює: Ідеально! Це було зроблено за допомогою бібліотеки shortcuts.js ! як приклад додано кілька інших натискань клавіш!

Просто запустіть фрагмент коду, натисніть всередину і натисніть Gклавішу!

Зверніть увагу на ctrl+Fі meta+Fщо буде відключити всі , keyboard shortcutsтак що ви повинні зробити гарячі клавіші в тому ж сценарії , як добре! також keyboard shortcutдії можуть бути закликані тільки до javascript!

Для того, щоб конвертувати HTML в javascript, phpабо ASP.netйти тут ! Щоб побачити все моє keyboard shortcutsв прямому ефірі JSFIDDLE Натисніть тут!

Оновлення

    <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>
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.