메뉴 건너뛰기

조회 수 8375 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

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

사용법은 아래 응용소스처럼 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 iframe 높이 자동으로 잡아주기 2014.03.01 5855
206 iframe 아이프레임 내용 길이에 따라서 높이가 자동으로 조절 되도록 2014.02.27 6206
205 iframe 자동 리사이즈 2014.03.01 5992
204 iframe사용시 높이 자동 조절 2015.06.19 6958
203 iframe을 리로드 하자! 2014.03.01 5933
202 input radio 체크유무 검사 2016.09.11 5562
201 input type checkbox 체크했는지 검사하는 소스 2014.03.01 5456
200 input type file multiple list (파일 업로드 리스트 확인) file 2016.11.17 12437
199 input 박스에서 유용한 자바 스크립트 2014.02.27 5455
198 input 빈칸 체크 2014.03.01 6271
197 input 태그에서 name과 id의 차이 2019.01.16 1089
196 input 테그안의 숫자 3자리 마다 콤마 찍기 2014.03.01 6074
195 input에 background-image 이벤트 2014.03.01 5356
194 Javascript - Calendar 달력 생성하고 제어하기 2021.03.09 513
193 Javascript - form태그 내부 ajax처리시 2번 전송되는 현상 2021.03.09 268
192 Javascript - Free SVG 한국맵 제어 처리 file 2021.03.09 871
191 javascript - vanillaJS로 체크박스(checkbox) 제어하기 file 2021.03.09 498
190 Javascript - 사업자 등록번호 유효성 체크 file 2021.03.09 1089
189 Javascript - 유효성 체크(이메일 정규식, IP 정규식, 비밀번호 등) 2021.03.09 727
188 Javascript - 이미지 미리보기 회전되어 나옴(EXIF) file 2021.03.09 36346
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 13 Next
/ 13

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved