Jquery - 단축키로 브라우저 화면전환하기

현재 만들고 Laravel로 제작하고 있는 웹사이트에 단축키 기능을 추가하고 싶어서 기능을 찾아서 적용을 했다. 

 

Script

/* 단축키 추가하기 */
        var shortcut = new Array();
        shortcut['w'] = "/forum/"; /* 새 글 쓰기 */
        shortcut['h'] = "/"; /* 새 글 쓰기 */

        $(document).keypress(function(e){
            var key = e.key;
            var tagName = e.target.tagName;

            if(tagName!='INPUT' && tagName!='TEXTAREA'){
                key = key.toLowerCase();

                for (var i in shortcut){
                    if (key == i){
                        window.location = shortcut[i];
                    }
                }
            }
        });

keypress -> 키보드가 눌렸을 때, function이 실행이되는데 e를 매개변수로 받고있다. e는 눌린 키보드 값이 되고,

이 값을 key 변수에 저장, 그리고 현재 키보드가 눌린 위치, 이벤트가 작용하는 위치(target)의 태그이름(tagName)을 

tagName에 저장한다. 

 

그래서 만약에 INPUT 태그나 TEXTAREA같은 데이터를 입력하는 곳에서 눌렸을 때에는 화면이 전환이되면 안되니까 

그것을 막는 if을 사용

 

그래서 shortcut 배열( 자신이 지정해놓은 단축키)에 일치하는 키가 입력되었을 경우 해당 URL로 location하게 된다. 

 

 

 

---

참고 사이트

zinee-world.tistory.com/451

[jQuery] 티스토리 단축키 추가하기