메뉴 건너뛰기

조회 수 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>

 


  1. No Image 21Sep
    by
    2016/09/21 Views 6033 

    엔코딩/디코딩 함수

  2. No Image 06Oct
    by
    2016/10/06 Views 12368 

    간단한 동적 SELECT 박스 구현하기

  3. No Image 17Nov
    by
    2016/11/17 Views 7928 

    브라우저별 이미지 크기 변경

  4. No Image 17Nov
    by
    2016/11/17 Views 10323 

    JavaScript 에서 JSON 생성

  5. input type file multiple list (파일 업로드 리스트 확인)

  6. No Image 17Nov
    by
    2016/11/17 Views 9821 

    javascript 화면 캡쳐

  7. No Image 22Dec
    by
    2016/12/22 Views 7114 

    접근성 윈도우 팝업 띄우기

  8. No Image 22Dec
    by
    2016/12/22 Views 5928 

    도메인 체크

  9. No Image 22Dec
    by
    2016/12/22 Views 6241 

    setTimeout 대체 스크립트 함수 (일시멈춤)

  10. No Image 22Dec
    by
    2016/12/22 Views 12346 

    GET방식으로 전송시 특수문자함께 전송하는 방법

  11. No Image 22Dec
    by
    2016/12/22 Views 7912 

    복사방지+드래그금지+마우스우클릭 금지

  12. No Image 22Dec
    by
    2016/12/22 Views 7359 

    response.setHeader

  13. No Image 22Dec
    by
    2016/12/22 Views 5369 

    자바스크립트 변수,함수,객체의 표현

  14. No Image 22Dec
    by
    2016/12/22 Views 8930 

    자바스크립트 실행 시간 측정

  15. No Image 22Dec
    by
    2016/12/22 Views 6321 

    자바스크립트 및 CSS를 이용한 숫자만 입력받기

  16. No Image 22Dec
    by
    2016/12/22 Views 5778 

    자바스크립트 모음

  17. No Image 22Dec
    by 조쉬
    2016/12/22 Views 8375 

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

  18. No Image 22Dec
    by
    2016/12/22 Views 8162 

    setTimeout() / clearTimeout() / setInterval()

  19. No Image 23Dec
    by
    2016/12/23 Views 5701 

    우클릭 금지

  20. No Image 23Dec
    by
    2016/12/23 Views 5740 

    이전, 위로 이동

Board Pagination Prev 1 ... 3 4 5 6 7 8 9 10 11 12 13 Next
/ 13

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved