Notice
Recent Posts
Recent Comments
Link
반응형
이로
[이로] JS로 페이지 내 단축키 만들기 본문
반응형
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