javascript - [단축키 설정 자바스크립트]shortcut.js

키보드를 단축키로 설정할 수 있는 스크립트다.

사용법은 아래 응용소스처럼 shortcut.js를 링크하고 shortcut.add()해서 사용하면 된다.

옵션중에 disable_in_input이란 옵션이 있는데 이걸 true로 놓으면 input이나 textarea 안에 포커스가 있을 때 단축키가 실행되지 않아 아주 편리하다.ㅋㅋ

shortcut.remove()하면 단축키를 사용하지 않게된다.

알파벳키도 싱글로 단축키로 사용가능 한것 같은데..나는 적용했더니 안되더라...ㅋㅋ

뭐 알파벳하나만 단축키로 잡을 일은 없을것 같긴 하지만...ㅡㅡ;;

적용가능한 키 종류

조합키[+조합키..]+키

예제:

Ctrl+A

조합키 이름은 아래 이름을 쓸 수 있답니다.

Ctrl
Alt
Shift
Meta

아마, Meta 키는 맥OS의 # 비슷하게 생긴 키인가 보네요..

키로 쓸 수 있는 것은

All alpha/numeric keys - abc...xyz,01..89
Special Characters - Every special character on a standard keyboard can be accessed.
Special Keys...
- Tab
- Space
- Return
- Enter
- Backspace
- Scroll_lock
- Caps_lock
- Num_lock
- Pause
- Insert
- Home
- Delete
- End
- Page_up
- Page_down
- Left
- Up
- Right
- Down
- F1
- F2
- F3
- F4
- F5
- F6
- F7
- F8
- F9
- F10
- F11
- F12

위에 나온 이름을 첫번째 파라미터로 "Ctrl+A" 이런 방식으로 넣으면 해당 키가 눌려질 때 정의된 기능이 실행되는 것이죠..

응용소스

<html>
<head>
  <script language="javascript" src="shortcut.js"></script>
  <script language="javascript">

   function shortcuts(){
    //smiple type
    shortcut.add( "Shift+F1",function() {alert("Shift+F1");});
    /*
     shortcut options
     1. type - String
     The event type - can be 'keydown','keyup','keypress'. Default: 'keydown'
     2. disable_in_input - Boolean
     If this is set to true, keyboard capture will be disabled in input and textarea fields. If these elements have focus, the keyboard shortcut will not work. This is very useful for single key shortcuts. Default: false
     3. target - DOM Node
     The element that should be watched for the keyboard event. Default : document
     4. propagate - Boolean
     Allow the event to propagate? Default : false
     5. keycode - Integer
     Watch for this keycode. For eg., the keycode '65' is 'a'.
    */
    //propagate ???
    shortcut.add( "Shift+Right",
          function() {alert("Shift+Right");},
          { 'type':'keydown', 'propagate':true, 'target':document }
    );
    //call function : runs
    //disable_in_input
    shortcut.add( "Ctrl+Shift+1",
          function() {runs("Ctrl+Shift+1");},
          {'type':'keydown','propagate':false,'disable_in_input':true,'target':document}
    );

    /*
     single key test

    //not execute
    shortcut.add('N',
          function() {runs("N");},
          {'disable_in_input':false,'type':'keydown'}
    );

    //execute
    shortcut.add('Ctrl',
          function() {runs("Ctrl");},
          {'disable_in_input':false,'type':'keydown'}
    );

    //execute
    shortcut.add('Shift',
          function() {runs("Shift");},
          {'disable_in_input':false,'type':'keydown'}
    );

    //execute
    shortcut.add('Alt',
          function() {runs("Alt");},
          {'disable_in_input':false,'type':'keydown'}
    );

    //execute
    shortcut.add('1',
          function() {runs("1");},
          {'disable_in_input':false,'type':'keydown'}
    );

    //execute
    shortcut.add('Right',
          function() {runs("Right");},
          {'disable_in_input':false,'type':'keydown'}
    );

    //execute
    shortcut.add('Tab',
          function() {runs("Tab");},
          {'disable_in_input':false,'type':'keydown'}
    );

    //execute
    shortcut.add('F1',
          function() {runs("F1");},
          {'disable_in_input':false,'type':'keydown'}
    );
    */

    shortcut.add("Ctrl+Shift+2",
          function() {alert("Ctrl+Shift+2");}
    );

    //Remove the shortcut
    shortcut.remove("Ctrl+Shift+2");
   }

   function runs(str){
    alert(str);
   }

   window.onload = shortcuts;
  </script>
</head>
<body>
  <textarea>ddd</textarea>
  </body>
</html>

List of Articles
번호	제목	날짜	조회 수
207	적용이 간편한 [글목록 인쇄] 등 특정 영역 인쇄하기 팁	2014.02.27	5441
206	자주쓰는 것들	2021.03.26	203
205	자바스크립트에서 이벤트 중단 하는 방법	2021.03.25	321
204	자바스크립트로 네트워크 연결 확인하기 (Navigator onLine Property)	2015.06.19	6197
203	자바스크립트, javascript, 간단한 파일 확장자 검사후 retur	2014.03.01	5434
202	자바스크립트 이벤트 목록입니다. ( javascript event )	2015.04.06	5596
201	자바스크립트 영문입력, 숫자만입력, 한글만 입력, 붙여넣기 방지	2015.02.02	10179
200	자바스크립트 아이디 기억하기 기능 구현 (쿠키저장)	2015.06.19	10923
199	자바스크립트 실행 시간 측정	2016.12.22	8930
198	자바스크립트 소수점 자리수 계산	2014.03.01	6897
197	자바스크립트 변수,함수,객체의 표현	2016.12.22	5369
196	자바스크립트 배열 중복값 다루기	2018.10.27	3898
195	자바스크립트 및 CSS를 이용한 숫자만 입력받기	2016.12.22	6321
194	자바스크립트 모음	2016.12.22	5778
193	자바스크립트 개체 복사	2014.02.27	6573
192	자바스크립트 urlencode(), urldecode(), rawurlencode(), rawurldecode()	2018.10.27	1913
191	자바스크립트 API 문서	2015.06.19	9086
190	자바 스크립트 confirm()함수에서 (확인,취소) -> (예,아니오)	2014.03.01	10210
189	입력된 폼의 내용 똑같이 복사	2014.03.01	6892
188	입력된 글씨수 제어	2014.03.01	6700

207

적용이 간편한 [글목록 인쇄] 등 특정 영역 인쇄하기 팁

2014.02.27

5441

206

자주쓰는 것들

2021.03.26

203