웹표준으로 인해 단축키로 특정위치로 이동하는 소스가 필요하다고 해서 샘플소스를 받았는데 크로스 브라우징이 전혀 안되있어서 jquery로 수정해서 만들어 보았다. 좀더 정리하면 좋겠으나 말그대로 샘플이므로 그냥 두기로 했다. 추가 설명을 하자면 파폭에서 keyCode가 먹지 않는 관계로 event.charCode를 추가해주었다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>keyCode 에 따른 단축키</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
$(document).keypress(function(event){
var key = event.charCode || event.keyCode;
if(key==81){
//alert('Q를 누르셨습니다');
$('#cntQ').focus();
}else if(key==87){
//alert('W를 누르셨습니다');
$('#cntW').focus();
}else if(key==69){
//alert('E를 누르셨습니다');
$('#cntE').focus();
}else if(key==82){
//alert('R를 누르셨습니다');
$('#cntR').focus();
}else if(key==72){
//alert('H를 누르셨습니다');
$('#home').focus();
}
});
});
//-->
</script>
</head>
<body>
<div id="wrapperCnt" style="height:800px; background:#fff;">
<a id="#"></a>대문자 Q, W, E R 에 대한 키보드 입력값에 따라 해당 위치로 이동합니다.<br><br>
H를 누르시면 컨텐츠 상단 (home)으로 설정된 곳으로 이동합니다.
</div>
<div style="height:500px; background:#ccc;">
<a id="cntQ" href="#">ID는 cntQ</a>
</div>
<div style="height:500px; background:#bbb;">
<a id="cntW" href="#">ID는 cntW</a>
</div>
<div style="height:500px; background:#ccc;">
<a id="cntE" href="#">ID는 cntE</a>
</div>
<div style="height:500px; background:#eee;">
<a id="cntR" href="#">ID는 cntR</a>
</div>
</body></html>
'Javascript > jQuery' 카테고리의 다른 글
| 타이머 만들기 (0) | 2013.03.12 |
|---|---|
| 달력 만들기 (0) | 2013.01.17 |
| 레이어를 화면 중앙에 띄우기 (0) | 2012.11.08 |
| offsetParent() (0) | 2012.10.04 |
| 이벤트 처리(펌) (0) | 2012.10.04 |