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>

번호	제목	날짜	조회 수
247	'Array', 배열 및 다차원 배열 선언에 대해 알아보자!	2015.02.03	11110
246	'blur', 이미지 클릭시 테두리를 없애자!	2015.02.03	7353
245	'button', 클릭한 횟수 알아내기!	2015.02.03	10754
244	'checkbox', 체크박스 모두체크 그리고 모두해제!	2015.02.03	7492
243	'focus', 엔터 누르고 이동하자!	2015.02.03	12857
242	'onmouseover', 마우스 오버 효과 - 글씨 바꾸기!	2015.02.03	9433
241	'open', 새창을 열어보자!	2015.02.03	6036
240	'opener', 부모창과 자식창의 텍스트를 교환하자!	2015.02.03	7308
239	'setInterval', 타이머를 사용하자! ==setTimeout	2015.02.03	6223
238	'setTimeout', 타이머를 사용하자!	2015.02.03	7033
237	'레이블', 반복문을 제어하자!	2015.02.03	5540
236	'문자 ↔ 숫자', 타입을 바꿔보자!	2015.02.03	6207
235	(소스)jqury 롤오버 버튼 쉽게 만들기	2014.03.01	5784
234	2단계 트리메뉴 마우스오버(mouseover), 온포커스(onfocus) 구현	2015.04.06	8201
233	3자리 마다 쉼표만 찍어주는 number_format 함수	2021.03.26	225
232	3자리마다 콤마찍기	2014.02.27	5755
231	5초 후에 해당페이지로 url 옮기기	2014.02.27	10485
230	5초후 자동으로 창닫기	2015.02.03	9034
229	== / === / != / !== 차이	2018.11.07	1443
228	ajax 사용시 Internal Sever Error 뜨는 경우	2021.03.26	958

프로그램언어

프로그램언어

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

단축키

단축키

로그인

다국어

검색

LANGUAGE

프로그램언어

프로그램언어

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

단축키

단축키