메뉴 건너뛰기

조회 수 8376 추천 수 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. [jQuery] 탭 메뉴

    Date2014.03.01 Views6399
    Read More
  2. [단축키 설정 자바스크립트]shortcut.js

    Date2016.12.22 Views8376
    Read More
  3. [라디오버튼 오류 체크] 간단한 문제 예제

    Date2015.06.19 Views7712
    Read More
  4. 간단하게 우클릭 막는방법

    Date2016.09.11 Views5883
    Read More
  5. 간단한 동적 SELECT 박스 구현하기

    Date2016.10.06 Views12371
    Read More
  6. 개발자도구 F12키 막기

    Date2023.01.12 Views175
    Read More
  7. 공백 검사 함수

    Date2015.06.19 Views14653
    Read More
  8. 구구단 반복문,조건문 변경해서 만들기

    Date2016.09.11 Views6091
    Read More
  9. 금액에 점찍고 한글 표시하기

    Date2019.01.16 Views1271
    Read More
  10. 기간 설정용 달력 팁앤노하우

    Date2019.01.16 Views1137
    Read More
  11. 깔끔한 이미지로

    Date2014.02.27 Views6260
    Read More
  12. 날짜 간의 일수 계산

    Date2014.02.27 Views7551
    Read More
  13. 날짜 계산 (Date) 마지막 날짜(말일)/윤달/윤년 처리하기

    Date2021.08.20 Views1552
    Read More
  14. 날짜 계산하기 (년/월/일 더하기, 빼기)

    Date2021.08.20 Views2362
    Read More
  15. 날짜 및 시간 입력 구현하기, Bootstrap DateTimePicker

    Date2017.04.06 Views16541
    Read More
  16. 네이버 달력 자바스크립트 소스

    Date2014.02.27 Views6329
    Read More
  17. 다음 우편번호(주소) api 예시

    Date2018.07.04 Views4908
    Read More
  18. 달력

    Date2015.02.03 Views6684
    Read More
  19. 대소문자 변경 (대문자를 소문자로, 소문자를 대문자로)

    Date2021.08.20 Views261
    Read More
  20. 도메인 체크

    Date2016.12.22 Views5930
    Read More
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 13 Next
/ 13

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved