jQuery를 사용한 키보드 단축키


답변:


143

이 질문은 원래 요청되었으므로 jQuery의 기본 저자 인 John Resig가 js-hotkeys 프로젝트를 분기시키고 개선했습니다. 그의 버전은 다음에서 구할 수 있습니다.

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


6
그것은 지원 meta하지 않는 키를 지원합니다 js-hotkeys:) 감사합니다
Lipis

그는 Nuget 패키지를 가지고 있으므로 이것과 함께 갔다.
정렬

키 조합 (특히 shift, ctrl, alt, ...와 같은 특수 키)에는 매우 좋지만 기본 매핑 0-9 및 az에 문제가 있습니다.
Martin

1
이 답변은 유용한 링크를 제공합니다. 원래 질문에도 대답 해 주시겠습니까? 예를 들어 "누군가 문자 g를 눌렀을 때 어떻게 이벤트가 발생합니까?" jquery.hotkeys 모듈에는 몇 가지 문서가 있습니다. 당신이 이미하고있는 것을 이미 알고 있다면 좋을 것입니다 ...하지만 우리가 무언가를 해킹하려는 사람들에게는 원래 질문에 대한 대답이 좋을 것입니다.
이안 랭 모어

브라우저에서 기본 버블 링을 어떻게 방지합니까? 내가 본 것에서 readme에 언급 된 것은 없습니다.
Gurnard

86

무엇에 대한 jQuery를 단축키 ?

jQuery Hotkeys를 사용하면 코드에서 거의 모든 키 조합을 지원하는 키보드 이벤트를 감시 할 수 있습니다.

예를 들어 Ctrl+ c를 함수 ( f)에 바인딩하려면

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

2
와우 ... 아마도 내가 사용했던 가장 쉬운 플러그인 일 것입니다!
d -_- b

이 작업을 즉시 수행해도 브라우저 기본값을 막을 수는 없습니다. 따라서 Ctrl + n은 예를 들어 브라우저에서 새 탭을 엽니 다. 이벤트 객체에 액세스 할 수 없으므로 이로 Default를 방지하는 방법을 모릅니다.
Gurnard

@Gurnard 우리는 아마도 사용자에게 미리 알려졌고 웹 앱 내에서 그 동작을 기대하는 경우를 제외하고 사용자 기본값을 막지 않아야 할 것입니다. 그렇지 않으면 엄청나게 성가시다. 예 1 : Stack Exchange에서 게시물을 작성할 때 브라우저를 숨기지 않고 Cmd H## Heading ##텍스트 필드에 나타납니다. 예 2 : 이 질문. 실시 예 3 : 이 Q & A .
Mentalist

2
@Mentalist UX 의견에 감사하지만 현재 상황에는 적용되지 않습니다. 난 그냥 기술적으로 UX 결정이 또 다른 게시물이 될 기술적으로 할 수 있기를 원합니다 :-)
Gurnard

43

최근에 이것을 위해 독립형 라이브러리를 작성했습니다. jQuery가 필요하지 않지만 jQuery와 함께 사용할 수 있습니다. 이것을 마우스 트랩이라고합니다.

http://craig.is/killing/mice 에서 확인할 수 있습니다


4
이것은 매우 좋군요. 일련의 키 처리에 대한 지원에 정말 감사합니다.
lorefnon

2
Moustrap을 사용하고 있으며 HotKeys 플러그인보다 훨씬 좋습니다. 매우 추천합니다. @ 좋은 작품 감사합니다.
Primoz Rome

1
요소의 기본 동작을 방지하는 방법뿐만 아니라 설명서를 좋아했습니다. 이 라이브러리는 NuGet에 있어야합니다.
Aamir

동의했다. 이것은 우수합니다. 텍스트 영역에 초점이 맞았을 때 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 || e. 어느;
브렌트 파우스트

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

이것은 당신이 텍스트 필드에 초점을 맞춘 경우에만 발생합니다
Michael Koper

링크가 죽었습니다 :(

8

shortKeys jQuery 플러그인을 사용해 볼 수도 있습니다 . 사용 예 :

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

3

Codeacademy에서 jQuery를 연구 한 후 키를 animate 속성과 바인딩하는 솔루션을 찾았습니다. 전체 아이디어는 한 섹션에서 다른 섹션으로 이동하기 위해 스크롤하지 않고 애니메이션하는 것이 었습니다. Codeacademy의 예는 Mario를 DOM을 통해 이동하는 것이었지만 웹 사이트 섹션 (높이가 100 % 인 CSS)에 적용했습니다. 다음은 코드의 일부입니다.

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

1.10+ 버전의 jQuery와 작동하는 hotKeys.js의 새 버전이 있습니다. 작고 100 줄 자바 스크립트 파일입니다. 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를 https://github.com/realdanielbyrne/HoyKeys.git 에서 복제 하거나 github repo 페이지 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+Fmeta+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>
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.