이로

[이로] JS로 페이지 내 단축키 만들기 본문

컴퓨터/자바스크립트

[이로] JS로 페이지 내 단축키 만들기

利路 2020. 4. 1. 13:59
반응형
shortcutController : {
   	        config : {
   	            urlKeyMapping : {
   	                go : [71, 191] // default : g + /
   	                , a : 65 // a
   	                , b : 66 // b
   	                , c : 67 // c
   	                , d : 68 // d
   	                , e : 69 // e

   	            } 
                , url : {
   	                , a : "a페이지 url"
   	                , b : "b페이지 url"
   	                , c : "c페이지 url"
   	                , d : "d페이지 url"
   	                , e : "e페이지 url"

   	            }
   	        }
   	        , start : function(){
   				var parent = this.parent;
   				var key = this.config.urlKeyMapping;
                var url = this.config.url;
   	            // 누른 키 저장
   				var keypress = {};
   				

   				// 누른 키 keypress에 저장
   		        window.onkeydown = function(event){
   		            var focusedEvent = Object.prototype.toString.call(event);
   	   				if(focusedEvent == "[object KeyboardEvent]") // Input, Textarea 자동완성 클릭시 스크립트 에러나는것 방지
   	           			keypress[event.which.toString()] = true;
   	           	};
   		        
   	            // 눌렸던 키를 keypress에서 저장 해제
   	   	        window.onkeyup = function(event){ 
   	   	            var focusedEvent = Object.prototype.toString.call(event);
   	   	     	    if(focusedEvent == "[object KeyboardEvent]") // Input, Textarea 자동완성 클릭시 스크립트 에러나는것 방지
   	           			keypress[event.which.toString()] = false;
   	           	};
   	           
   		        // input, textarea 제외하고 단축키 먹도록 하자.
   		        window.onkeypress = function(event){ 
   		            var focusedType = Object.prototype.toString.call(document.activeElement);
   		        	
   		        	// 포커싱된 HTML 타입 체크
   		        	if((focusedType == "[object HTMLInputElement]") || (focusedType == "[object HTMLTextAreaElement]") || (focusedType == "undefined"))
   	           			return;
   		        
   		        	if(keypress[key.go[0]] && keypress[key.go[1]]){
	   			        if(keypress[key.a]){ // a 로 이동 : / g a
	   		           		location.href = url.a;
	   		        	}
	   			        if(keypress[key.b]){ // b 로 이동 : / g b
	   			            location.href = url.b;
	   		        	}
	   			        if(keypress[key.c]){ // c 로 이동 : / g c
	   			            location.href = url.c;
	   		        	}
	   		        	if(keypress[key.d]){ // d 로 이동 : / g d
	   		     	        location.href = url.d;
	   		            }
	   		        	if(keypress[key.e]){ // e 로 이동 : / g e
	   		     	        location.href = url.e;
	   		            }
	   		        	
   		        	}
   		        };
  			}
    	}
shortcutController.start();

 

크롬 외 다른 브라우저에서는 확인하지 않았습니다. 크롬 적용기준으로 만들었습니다.

 

  간단하게 페이지 내 이동하도록 하는 단축키 소스입니다. 물론 단축키 입력시 url 설정에 따라 외부페이지로 이동도 가능합니다. location.href대신 다른 후처리를 적용해도 유용합니다.

 

공통으로 어느 곳에든 바로 사용할 수 있도록 순수하게 javascript 로 만들었습니다.

반응형

'컴퓨터 > 자바스크립트' 카테고리의 다른 글

Vue3 Axios.create 설계 및 에러처리  (1) 2024.11.26
WebRtc MediaStream  (0) 2020.09.03
java script 에서 세션등록하기  (0) 2019.09.14
[JS] 자바 스크립트 1일차 Review  (0) 2019.06.11
Comments