메뉴 건너뛰기

조회 수 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
번호 제목 날짜 조회 수
47 setTimeout() / clearTimeout() / setInterval() 2016.12.22 8162
46 드롭다운 메뉴를 만들어보자! -1탄 file 2015.02.03 8171
45 2단계 트리메뉴 마우스오버(mouseover), 온포커스(onfocus) 구현 2015.04.06 8204
» [단축키 설정 자바스크립트]shortcut.js 2016.12.22 8375
43 페이지 로드 할때 컨트롤에 포커스 주기 2015.02.03 8500
42 Location 객체 - URL 파싱 - URL에서 전달인자 추출하기 함수 작성 file 2015.06.19 8523
41 [INPUT BOX] 텍스트박스(INPUT 박스) 가 동적으로 추가,삭제됩니다 2017.02.19 8526
40 마우스 드래그, 오른쪽 팝업메뉴, 선택 막기 (IE11, 파이어폭스, 크롬 확인) 2015.06.19 8577
39 특정부위 마우스 오버시 설명을 보여주는 소스 2014.03.17 8697
38 주민등록번호로 성별/나이/연령대 구분 2014.03.01 8794
37 자바스크립트 실행 시간 측정 2016.12.22 8930
36 5초후 자동으로 창닫기 2015.02.03 9034
35 자바스크립트 API 문서 2015.06.19 9087
34 이미지 마우스 드래그로 스크롤을 움직이는 소스 2014.03.17 9362
33 location.href 로 새창 여는 방법 (target=_blank 효과) 2015.06.19 9406
32 'onmouseover', 마우스 오버 효과 - 글씨 바꾸기! file 2015.02.03 9436
31 javascript 화면 캡쳐 2016.11.17 9821
30 Javascript selectbox selected 컨트롤 file 2018.06.21 10058
29 예제 - 자바스크립트로 현재 달의 달력 만들기 (calendar) 2015.06.19 10063
28 자바스크립트 영문입력, 숫자만입력, 한글만 입력, 붙여넣기 방지 2015.02.02 10180
Board Pagination Prev 1 ... 4 5 6 7 8 9 10 11 12 13 Next
/ 13

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved