키보드 단축키로 페이지를 쉽게 이동할 수 있으면 특정 상황에서 매우 편리할 것 같다는 생각으로 만들어 본 기능입니다.
매우 단순하므로 프로그래밍 언어를 잘 모르는 분들도 쉽게 적용할 수 있을 것으로 기대합니다.
목차
상단 메뉴에 적용해보기
관리자 페이지의 꾸미기 > 메뉴 부분에서 메뉴명을 좀 수정해 보겠습니다.
저는 메뉴명 뒤 괄호 안에 단축키로 사용할 알파벳을 적어 놓았습니다.
다음과 같이 적용이 된 상태입니다.
키 입력 값 처리하기
입력 받은 키 값에 따른 처리 로직을 작성해 보겠습니다. 자바스크립트를 활용하면 쉽게 가능합니다.
다음과 같이 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 키를 누르기만 하면 해당 페이지로 이동할 수 있습니다. 저는 가장 대표적인 메뉴를 예로 들었지만 필요에 따라 다양한 부분에 응용할 수 있을 것 같습니다.
예를 들면 맨 상단으로 이동, 댓글로 바로 이동, 글자 크기 조절, 배경음악 볼륨 조절, 다크/라이트 모드 전환 등의 기능을 단축키로 만들어도 매우 유용할 것 같습니다.
도움이 되시길 바랍니다 :)
'정보 > 블로그 운영팁' 카테고리의 다른 글
| 새로운 워드프레스 블로그 운영 계획 (5) | 2022.08.03 |
|---|---|
| imgur.com 이미지 업로드 API 사용 방법 (0) | 2022.05.22 |
| 최근 수익 급상승 광고 플랫폼 카카오 애드핏 (1) | 2022.04.23 |
| 카카오 뷰에 티스토리 글 노출, 대박 이게 된다고? (9) | 2022.03.08 |
| 카카오 뷰 티스토리 연동 시 애드센스 광고 노출 향상 방법 (4) | 2022.03.03 |
| 티스토리 디데이 D-Day 기능 만드는 방법 (0) | 2022.02.20 |
| 티스토리 블로그 자동 번역 URL 생성하는 방법 (1) | 2021.12.11 |
| 광고 수익 향상 꿀팁, 글 중간 애드센스 광고 자동 삽입 업그레이드 버전 (21) | 2021.12.04 |
댓글