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
번호	제목	날짜	조회 수
107	공백 검사 함수	2015.06.19	14589
106	개발자도구 F12키 막기	2023.01.12	169
105	간단한 동적 SELECT 박스 구현하기	2016.10.06	12368
104	간단하게 우클릭 막는방법	2016.09.11	5879
103	[라디오버튼 오류 체크] 간단한 문제 예제	2015.06.19	7712
»	[단축키 설정 자바스크립트]shortcut.js	2016.12.22	8375
101	[jQuery] 탭 메뉴	2014.03.01	6399
100	[jQuery] 실시간 검색어 순위 순서대로 보여주기	2014.03.01	12017
99	[jQuery] 상위부터 차례로 지역 선택하기	2014.03.01	45976
98	[jQuery] textarea 글자수 카운트	2014.03.01	7420
97	[INPUT BOX] 텍스트박스(INPUT 박스) 가 동적으로 추가,삭제됩니다	2017.02.19	8526
96	utf-8일때 alert 한글 깨짐 해결	2021.03.26	3558
95	top 부분이 고정되는 슬라이딩 메뉴입니다	2014.03.01	5752
94	textarea의 글자수 제한	2014.02.27	6161
93	Textarea 글자수 체크	2014.03.01	5651
92	split, join, replace, replace_all	2021.03.26	204
91	span - 동적으로 글자 바꾸기, 보이기 안보이기	2019.01.16	1446
90	setTimeout() / clearTimeout() / setInterval()	2016.12.22	8162
89	setTimeout 대체 스크립트 함수 (일시멈춤)	2016.12.22	6241
88	SelectBox에서 선택된 항목의 텍스트, 값 가져오기 선택 옵션 넣기.	2018.07.04	4014

107

공백 검사 함수

2015.06.19

14589

106

개발자도구 F12키 막기 file