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>

번호	제목	날짜	조회 수
167	엔터키 / enter key submit form	2018.09.28	1528
166	엔코딩/디코딩 함수	2016.09.21	6033
165	엑셀처럼 td 사이즈 조절하기	2019.01.16	3385
164	에러처리	2019.01.16	1066
163	양력-음력	2015.02.03	7659
162	시간 계산하기 (시/분/초/ 더하기, 빼기)	2021.08.20	1707
161	스타일로 제목 자르기	2016.09.12	5833
160	스마트에디터(SmartEditor)에서 textarea 유효성 체크하기	2018.07.04	3984
159	스마트 에디터 (네이버 에디터) 에디터 내에서 이미지 크기 줄이기.(리사이징)	2018.07.04	2715
158	셀렉트(select) change 이벤트 (split)	2016.12.23	6009
157	셀렉트(select) change href 이벤트	2016.12.23	5899
156	셀렉트(select) change Ajax 이벤트	2016.12.23	12573
155	선택된 데이터 부모창에 넘기기 (iframe ☞ 부모창)	2015.04.28	6614
154	선택된 select 의 option 값을 다른 select로 넘겨주기	2014.03.01	5668
153	선택(CheckBox) 된 Row 삭제 - 화면에서 추가된 Row	2015.04.28	13538
152	샘플) top left menu	2014.03.01	5513
151	새창을 띠워서 focus주기	2014.03.01	5715
150	새로고침(F5) 금지	2018.03.28	6001
149	비동기 작업의 원리 (JavaScript 엔진, Web API, Task Queue, Event Loop)	2023.01.20	138
148	브라우저별 이미지 크기 변경	2016.11.17	7928

프로그램언어

프로그램언어

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

단축키

단축키

로그인

다국어

검색

LANGUAGE

프로그램언어

프로그램언어

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

단축키

단축키