정보/블로그 운영팁

티스토리 단축키로 페이지를 이동할 수 있을까?

아미넴 2022. 3. 11.
반응형

키보드 단축키로 페이지를 쉽게 이동할 수 있으면 특정 상황에서 매우 편리할 것 같다는 생각으로 만들어 본 기능입니다.

 

매우 단순하므로 프로그래밍 언어를 잘 모르는 분들도 쉽게 적용할 수 있을 것으로 기대합니다.

 

목차

     

    상단 메뉴에 적용해보기

    관리자 페이지의 꾸미기 > 메뉴 부분에서 메뉴명을 좀 수정해 보겠습니다.

     

    저는 메뉴명 뒤 괄호 안에 단축키로 사용할 알파벳을 적어 놓았습니다.

     

    다음과 같이 적용이 된 상태입니다.

     

    키 입력 값 처리하기

    입력 받은 키 값에 따른 처리 로직을 작성해 보겠습니다. 자바스크립트를 활용하면 쉽게 가능합니다.

     

    다음과 같이 body 태그 마지막 부분에 script 태그를 하나 만들고 그 안에 키보드를 누르고 떼는 순간 발생하는 이벤트를 처리하는 jQuery 구문 안에 switch문을 작성하였습니다.

    <html>
        <body>
    
            <!-- 생략 -->
    
            <script>
                $(document).keyup(function(e){
                    switch(e.key) {
                        case "h": // 홈으로 이동
                        case "H":
                            location.href = '/';
                            break;
                        case "g": // 방명록으로 이동
                        case "G":
                            location.href = '/guestbook';
                            break;
                        case "t": // 태그로 이동
                        case "T":
                            location.href = '/tag';
                            break;
                    }
                });
            </script>
        </body>
    </html>

     

    해결해야 할 문제

    사실 생각보다 단순하지는 않습니다. 댓글을 작성할 경우 해당 키를 누르면 페이지가 이동해 버리므로 댓글 창과 같은 인풋 요소에 커서가 포커싱 되어 있는 경우를 감지하여 잠시 무력화 시키는 로직이 추가로 필요해 보입니다.

     

    예를 들어 다음과 같이 해결할 수 있습니다. focus, blur 이벤트를 활용하여 입력 요소에 포커싱 된 경우에는 키 입력에 따른 특정 기능 수행을 무력화 시키고 포커싱이 해제되면 다시 원상 복구 시키는 방법입니다.

    var keyFlag = true;
                
    $('input[type!="hidden"], textarea').on('focus', function(e) {
        keyFlag = false;
    });
    
    $('input[type!="hidden"], textarea').on('blur', function(e) {
        keyFlag = true;
    });
    
    $(document).keyup(function(e){
        if(keyFlag) {
            switch(e.key) {
                case "h":
                    location.href = '/';
                    break;
                case "g":
                    location.href = '/guestbook';
                    break;
                case "t":
                    location.href = '/tag';
                    break;
            }
        }
    });

     

    응용하기

    이제 h, g, t 키를 누르기만 하면 해당 페이지로 이동할 수 있습니다. 저는 가장 대표적인 메뉴를 예로 들었지만 필요에 따라 다양한 부분에 응용할 수 있을 것 같습니다.

     

    예를 들면 맨 상단으로 이동, 댓글로 바로 이동, 글자 크기 조절, 배경음악 볼륨 조절, 다크/라이트 모드 전환 등의 기능을 단축키로 만들어도 매우 유용할 것 같습니다.

     

    도움이 되시길 바랍니다 :)

    반응형
    그리드형(광고전용)

    태그

    댓글6

    • 뉴게이트 2022.03.11 23:47 신고

      포스팅 잘보고 갑니다~^^
      답글

    • 서근 2022.03.13 22:28 신고

      안녕하세요! 저는 아래처럼 코드를 사용하고 있었는데, 미넴님이 만드신 코드가 더 활용도가 높은거같아요!
      좋은 코드 공유해주셔서 감사합니다 ㅎㅎ

      그런데 혹시 글 수정은 아래 코드에서 e로 해놨는데 저게 어느순간부터 안먹히더라구요 ㅠㅠ
      미넴님 코드에서 추가할 수 있는 방법이 있을까요?

      var key = new Array();
      key['q'] = "/manage";
      key['w'] = "/manage/newpost/?type=post&returnURL=%2Fmanage%2Fposts%2F";
      key['h'] = "/";
      key['t'] = "/manage/design/skin/edit#/source/html";
      key['e'] = "/admin/entry/post/?id=" + location.pathname.split('/')[1];

      function getKey(keyStroke) {
      if ((event.srcElement.tagName != 'INPUT') && (event.srcElement.tagName != 'TEXTAREA')) {
      isNetscape = (document.layers);
      eventChooser = (isNetscape) ? keyStroke.which : event.keyCode;
      which = String.fromCharCode(eventChooser).toLowerCase();
      for (var i in key)
      if (which == i) window.location = key[i];
      }
      }
      document.onkeypress = getKey;
      답글

      • 아미넴 2022.03.14 00:25 신고

        key 형태가 Array가 아닌데 Array로 초기화 한 점과 Netscape를 굳이 왜 체크하고 있는지는 잘 모르겠지만 사용하시는 코드도 나빠보이지는 않습니다.

        글 수정이 안 먹는 이유는 처음에는 좀 헷갈렸는데 생각해 보니 글 주소를 문자 또는 숫자로 설정했을 경우 URL이 달라져서 그런 걸로 추측됩니다.

      • 서근 2022.03.14 01:48 신고

        답글 정말 감사드립니다. 미넴님 덕에 스크립트가 더 깔끔해지고 사용하기도 편한거 같아요 ㅎㅎ

        말씀하신데로 최근에 URL을 숫자에서 문자로 바꾸고 나서부터 그런거 같습니다. 역시 다 아시는군요 ㅋㅋ 글수정 코드를 찾지못해서 적용은 못했지만 유용하게 사용하겠습니다

      • 서근 2022.03.14 06:30 신고

        미넴님 혹시 사적인 질문인데.. 메인 화면에 div 요소를 하나 넣었습니다. 그런데 이게 본문 및 방명록등에도 표시가 되어서

        해당요소를 css 스타일 시트에서 display: none; 으로 해놓고 스크립트로 메인화면에서만 뜨도록 해놨습니다.

        if ( window.location.pathname == '/' ) {
        document.write( '<style>hr.mv-wp-block-separator.is-style-wide{display:flex;}</style>' );
        }

        이런데 초반 로딩이 될때 그 부분이 display:none 상태로 메인화면에 리스트들이 제일 상단에 0.5초정도 보이고 위에 요소가 display:flex로 들어오더라구요.. 혹시 이 요소를 메인화면에만 나오게 따로 설정하는 방법이 있거나, html 위치 조정을 어느쪽에 해야하는지 알 수 있을까요?

        그리고, 저 요소를 지우면 페이지 속도가 76점 정도 되고, 저 요소를 넣으면 58점인데 SEO에 큰 영향을 주나요?

      • 아미넴 2022.03.14 08:44 신고

        스타일을 자바스크립트로 입력을 했으니 당연히 초반에 그 스타일이 적용되지 않은 형태일 수 있을거 같은데 div에 직접 스타일 주고 필요할때 자바스크립트로 제거하는 방식으로 하는게 나을듯 싶습니다.
        어차피 본인이 100% 만든 웹 페이지가 아닌 블로그를 수정할 경우 어느 정도 한계가 있으므로 SEO에 너무 집착하실 필요는 없을 것 같습니다.

    💲 추천 글