Js 웹 키보드 제어 페이지 넘 기 는 방법

본 고 는 Js 가 웹 키보드 의 페이지 넘 기 를 제어 하 는 방법 을 실례 로 서술 하 였 다.모두 에 게 참고 하도록 공유 하 다.구체 적 인 실현 방법 은 다음 과 같다.
키보드 제어 페이지 넘 기 효 과 는 우리 가 많이 볼 수 있 을 것 이 라 고 생각 합 니 다. 많은 사이트, 특히 앨범 의 효 과 는 키보드 로 상하 페이지 를 넘 길 수 있 습 니 다. 원 리 는 매우 간단 합 니 다. js 를 이용 하여 사용자 가 상하 키 를 누 르 는 지 확인 하면 실현 할 수 있 습 니 다.
예 를 들 면 다음 과 같다.

   이전 장 
  
 디 렉 터 리 되 돌리 기 
  
 다음 장 
 

js 코드 는 다음 과 같 습 니 다:

    
  <br> <!-- 
  <br> last=document . getElementById("last").href; 
  <br> next=document . getElementById("next").href; 
  <br> booklist=document . getElementById("booklist").href; 
  <br> function keyUp(e) { 
  <br> if(navigator.appName == "Microsoft Internet Explorer") 
  <br> { 
  <br> var keycode = event.keyCode; 
  <br> var realkey = String.fromCharCode(event.keyCode); 
  <br> }else 
  <br> { 
  <br> var keycode = e.which; 
  <br> var realkey = String.fromCharCode(e.which); 
  <br> } 
  <br> if(keycode==39){ 
  <br> window.location.href=next; 
  <br> } 
  <br> if(keycode==37){ 
  <br> window.location.href=last; 
  <br> } 
  <br> if(keycode==13){ 
  <br> window.location.href=booklist; 
  <br> } 
  <br> } 
  <br> document.onkeydown = keyUp; 
  <br> //--> 
  <br>  
 

오늘 인터넷 에서 이 기능 을 보 니 괜 찮 네요. 앞으로 글 에서 이 기능 을 추가 할 수 있 을 거 예요.

   var re = /[[(]?/igm; 
  
 if (window.document.body.innerHTML.search(re) >= 0) { 
  
 var PREVIOUS_PAGE = RegExp.$1; 
  
 } 
 

"이전 페이지" 를 찾 으 면 정의 합 니 다.

   var PREVIOUS_PAGE = RegExp.$1; 
  
 var re = /[[(]?/igm; 
  
 if (window.document.body.innerHTML.search(re) >= 0) { 
  
 var NEXT_PAGE = RegExp.$1; 
  
 } 
 

다음 페이지 를 찾 으 면 정의 합 니 다.

   var NEXT_PAGE = RegExp.$1; 
  
 if (typeof PREVIOUS_PAGE == "string" || typeof NEXT_PAGE == "string") { 
  
 document.onkeydown = function() { 
  
 switch (event.srcElement.tagName) { 
  
 case "INPUT": 
  
 case "TEXTAREA": 
  
 case "SELECT": 
  
 break; 
  
 default: 
  
 if (event.keyCode == 37 /* Arrow Left*/ && typeof PREVIOUS_PAGE == "string") { 
  
 window.location.href = PREVIOUS_PAGE; 
  
 } 
  
 else if (event.keyCode == 39 /* Arrow Right */ && typeof NEXT_PAGE == "string") { 
  
 window.location.href = NEXT_PAGE; 
  
 } 
  
 } 
  
 } 
  
 } 
 

다음은 내 가 했 던 위아래 로 넘 기 는 단축 키 를 말 해 보 자.사용자 가 좌우 방향 키 를 눌 렀 을 때 js 는 키보드 코드 를 가 져 온 다음 에 다음 페이지 나 이전 페이지 로 넘 어 갑 니 다. 현재 인터넷 에 있 는 많은 코드 는 ie 이 고 fireforx 에서 실행 할 수 없습니다. ff 에서 표준 이 아 닌 * click () 을 지원 하지 않 기 때 문 입 니 다. ie 에서 A 탭 을 click 작업 을 하면 기본적으로 해당 하 는 사이트 로 넘 어 갑 니 다. ff 에서 실행 할 수 없습니다 (onClick ()그렇지만 이것 은 실행 중인 A 의 onClick 이벤트 입 니 다.
해결 방법 도 간단 합 니 다. 우 리 는 이 방법 을 사용 할 수 있 습 니 다. 사용자 가 오른쪽 단 추 를 눌 렀 을 때 다음 페이지 의 A 의 href 속성 을 window. location. href 에 부여 하면 됩 니 다.

   var $=function(id) 
  
 { 
  
     return document.getElementById(id); 
  
 } 
  
 var hotKey=function(e) 
  
 { 
  
     var e =e||event; 
  
     var k = e.keyCode||e.which||e.charCode;//       
  
     if (k == 37) 
  
     { 
  
         if ($("prevPage")) 
  
             window.location.href = $("prevPage").href; 
  
     } 
  
     else if (k == 39) 
  
     { 
  
         if ($("nextPage")) 
  
             window.location.href = $("nextPage").href; 
  
     } 
  
     else if (k == 72) 
  
     { 
  
         if ($("home")) 
  
             window.location.href = $("home").href; 
  
     } 
  
 } 
  
 document.onkeydown = hotKey;//    
 

본 고 에서 말 한 바 와 같이 여러분 이 자 바스 크 립 트 를 바탕 으로 하 는 웹 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.