夏日博客

A-A+

Js实现网页键盘控制翻页程序代码

2016年10月15日 前端设计 暂无评论 阅读 5 views 次

键盘控制翻页效果我想我们不少见了，经常在很多网站特别是相册的效果都可以直接使用键盘进行上下页进行翻页了，原理很简单，只要利用js监测用户是否有按上下键即可实现。

举例,代码如下:

  1. <a id="last" href="<?=$lefturl?>">上一章</a>  
  2. <a id="booklist" href="<?=$booklisturl?>">返回目录</a>  
  3. <a id="next" href="<?=$righturl?>">下一章</a>  

js代码如下:

  1. <script language="javascript">  
  2. <!--  
  3. last=document . getElementById("last").href;  
  4. next=document . getElementById("next").href;  
  5. booklist=document . getElementById("booklist").href;  
  6. function keyUp(e) {  
  7. if(navigator.appName == "Microsoft Internet Explorer")  
  8. {  
  9. var keycode = event.keyCode;  
  10. var realkey = String.fromCharCode(event.keyCode);  
  11. }else  
  12. {  
  13. var keycode = e.which;  
  14. var realkey = String.fromCharCode(e.which);  
  15. }  
  16. if(keycode==39){  
  17. window.location.href=next;  
  18. }  
  19. if(keycode==37){  
  20. window.location.href=last;  
  21. }  
  22. if(keycode==13){  
  23. window.location.href=booklist;  
  24. }//xiariboke.net  
  25. }  
  26. document.onkeydown = keyUp;  
  27. //-->  
  28. </script>  

今天从网上看到这个功能,不错啊,以后就可以在文章中,增加这个功能了,代码如下:

  1. var re = /<a href=["']?([-=w./?]+)["']?>[[(<]?上一页[])>]?</a>/igm;   
  2. if (window.document.body.innerHTML.search(re) >= 0) {   
  3. var PREVIOUS_PAGE = RegExp.$1;   
  4. }   
  5. 如果搜下到"上一页",则定义var PREVIOUS_PAGE = RegExp.$1;   
  6. var re = /<a href=["']?([-=w./?]+)["']?>[[(<]?下一页[])>]?</a>/igm;   
  7. if (window.document.body.innerHTML.search(re) >= 0) {   
  8. var NEXT_PAGE = RegExp.$1;   
  9. }   
  10. 如果搜下到"下一页",则定义var NEXT_PAGE = RegExp.$1;   
  11. if (typeof PREVIOUS_PAGE == "string" || typeof NEXT_PAGE == "string") {   
  12. document.onkeydown = function() {   
  13. switch (event.srcElement.tagName) {   
  14. case "INPUT":   
  15. case "TEXTAREA":   
  16. case "SELECT":   
  17. break;   
  18. default:   
  19. if (event.keyCode == 37 /* Arrow Left*/ && typeof PREVIOUS_PAGE == "string") {   
  20. window.location.href = PREVIOUS_PAGE;   
  21. }   
  22. else if (event.keyCode == 39 /* Arrow Right */ && typeof NEXT_PAGE == "string") {   
  23. window.location.href = NEXT_PAGE;   
  24. }   
  25. }   
  26. }   
  27. }  

下面说一下我做过的一个上下翻页的快捷键实现。当用户点击左右方向键时，js获取键盘代码，然后跳转到下一页或者上一页，现在网上很多代码都是ie的，firefox下无法执行，很多时候都是因为ff下不支持非标准的**.click()造成的，ie下对A标签进行click操作默认转到了相应的网址，而ff下不可行（onClick()倒是可以，不过这是执行的A的onClick事件）。

解决办法也很简单，我们可以采用这个方法：捕获用户点击右方向键时，把下一页的A的href属性赋给window.location.href就可以了,代码如下 :

  1. var $=function(id)  
  2. {  
  3.     return document.getElementById(id);  
  4. }  
  5. var hotKey=function(e)   
  6. {  
  7.     var e =e||event;  
  8.     var k = e.keyCode||e.which||e.charCode;//获取按键代码  
  9.     if (k == 37)  
  10.     {  
  11.         if ($("prevPage"))  
  12.             window.location.href = $("prevPage").href;  
  13.     }  
  14.     else if (k == 39)  
  15.     {  
  16.         if ($("nextPage"))  
  17.             window.location.href = $("nextPage").href;  
  18.     }  
  19.     else if (k == 72)  
  20.     {  
  21.         if ($("home"))  
  22.             window.location.href = $("home").href;  
  23.     }//xiariboke.net  
  24. }  
  25. document.onkeydown = hotKey;//左右键  
标签：

给我留言