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>

번호	제목	날짜	조회 수
147	깔끔한 이미지로	2014.02.27	6260
146	setTimeout 대체 스크립트 함수 (일시멈춤)	2016.12.22	6242
145	마우스대면 글자 없어지는 검색창	2014.03.01	6226
144	'setInterval', 타이머를 사용하자! ==setTimeout	2015.02.03	6223
143	클릭위치로 레이어 띄우기	2014.03.01	6220
142	'문자 ↔ 숫자', 타입을 바꿔보자!	2015.02.03	6207
141	iframe 아이프레임 내용 길이에 따라서 높이가 자동으로 조절 되도록	2014.02.27	6206
140	자바스크립트로 네트워크 연결 확인하기 (Navigator onLine Property)	2015.06.19	6199
139	JDK6 (Java SE Development Kit 6)이하 버전 다운로드 주소	2016.09.11	6165
138	textarea의 글자수 제한	2014.02.27	6161
137	유효성 검사, 모든 폼에 값이 입력되도록 해보자!	2015.02.03	6125
136	현재시간 기준 날짜 계산	2016.09.21	6103
135	구구단 반복문,조건문 변경해서 만들기	2016.09.11	6091
134	해상도에 따라 배경 바꾸기	2014.03.01	6083
133	input 테그안의 숫자 3자리 마다 콤마 찍기	2014.03.01	6077
132	엔코딩/디코딩 함수	2016.09.21	6040
131	'open', 새창을 열어보자!	2015.02.03	6037
130	셀렉트(select) change 이벤트 (split)	2016.12.23	6009
129	부드럽게 페이지 이동하기	2016.09.11	6003
128	새로고침(F5) 금지	2018.03.28	6001

프로그램언어

프로그램언어

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

단축키

단축키

로그인

다국어

검색

LANGUAGE

프로그램언어

프로그램언어

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

단축키

단축키