Комбінації клавіш на 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.