Сочетания клавиш с помощью jQuery


186

Как я могу подключить событие к событию, если кто-то нажимает на письмо g?

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


3
Карта символов для всех букв на этом классном сайте: rmhh.co.uk/ascii.html
Trevor

Еще один полезный сайт для кодов ключей - keycode.info
npad

Ответы:


143

Поскольку этот вопрос изначально задавался, Джон Резиг (основной автор jQuery) разработал и улучшил проект js-hotkeys. Его версия доступна по адресу:

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


6
Он поддерживает metaключ, то, что не поддерживается в js-hotkeys:) Спасибо
Lipis

У него есть пакет Nuget, поэтому я пошел с этим.
выровнен

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

1
Этот ответ дает полезные ссылки. Не могли бы вы также ответить на оригинальный вопрос? Например, «как я могу подключить событие к событию, если кто-то нажмет букву g»? В модуле jquery.hotkeys есть некоторая документация, и я уверен, что это прекрасно, если вы уже знаете, что делаете ... но для тех из нас, кто пытается что-то взломать, ответ на оригинальный вопрос был бы отличным.
Ян Лэнгмор

Как вы предотвращаете всплытие по умолчанию в браузере? Ничто не упомянуто в readme из того, что я вижу.
Gurnard

86

А как насчет горячих клавиш JQuery ?

Горячие клавиши jQuery позволяют вам наблюдать за событиями клавиатуры в любом месте вашего кода, поддерживая практически любую комбинацию клавиш.

Чтобы связать Ctrl+ cс функцией ( f), например:

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

2
ВАУ ... это, наверное, самый простой плагин, который я когда-либо использовал!
d -_- b

работая с этим из коробки это не предотвращает настройки браузера по умолчанию. Например, Ctrl + n откроет новую вкладку в браузере. Нет доступа к объекту события, поэтому не знаете, как с этим предотвратитьDefault.
Gurnard

@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 спасибо за хорошую работу.
Примоз Рим

1
Мне понравилась документация, а также способ предотвратить поведение элементов по умолчанию. Эта библиотека должна быть на NuGet.
Аамир

Согласовано. Это превосходно. jquery.hotkey не корректно стрелял, когда текстовая область фокусировалась на мне, но это не так. Также лучше во всех отношениях, упомянутых предыдущими комментаторами.
erosebe

24

Ну, есть много способов. Но я предполагаю, что вы заинтересованы в продвинутой реализации. Несколько дней назад я был в том же поиске, и я нашел один.

Вот.

Это хорошо для захвата событий с клавиатуры, и вы найдете карты персонажей тоже. И хорошо, что ... это JQuery. Проверьте демо на той же странице и решите.

Альтернативная библиотека здесь .


2
Просто чтобы прояснить это, он прекрасно работает и без jquery.
Разное 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 || e.which;
Брент Фауст

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
Использовать это! if (e.which == 103 || e.keyCode == 103 || window.event.keyCode == 103)
поездка

Это происходит только тогда, когда вы сосредоточены на текстовом поле
Майкл Копер

Ссылка мертва :(


3

Изучив некоторые jQuery в Codeacademy, я нашел решение связать ключ со свойством animate. Вся идея заключалась в том, чтобы анимировать без прокрутки, чтобы перейти от одного раздела к другому. Примером из 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. 4 КБ или просто 2 КБ. Вот несколько простых примеров использования:

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