Js实现网页键盘控制翻页的方法


Posted in Javascript onOctober 30, 2014

本文实例讲述了Js实现网页键盘控制翻页的方法。分享给大家供大家参考。具体实现方法如下:

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

举例如下:

<a id="last" href="<?=$lefturl?>">上一章</a>

<a id="booklist" href="<?=$booklisturl?>">返回目录</a>

<a id="next" href="<?=$righturl?>">下一章</a>

js代码如下:
<script language="javascript">

<!--

last=document . getElementById("last").href;

next=document . getElementById("next").href;

booklist=document . getElementById("booklist").href;

function keyUp(e) {

if(navigator.appName == "Microsoft Internet Explorer")

{

var keycode = event.keyCode;

var realkey = String.fromCharCode(event.keyCode);

}else

{

var keycode = e.which;

var realkey = String.fromCharCode(e.which);

}

if(keycode==39){

window.location.href=next;

}

if(keycode==37){

window.location.href=last;

}

if(keycode==13){

window.location.href=booklist;

}

}

document.onkeydown = keyUp;

//-->

</script>

今天从网上看到这个功能,不错啊,以后就可以在文章中,增加这个功能了
var re = /<a href=["']?([-=w./?]+)["']?>[[(<]?上一页[])>]?</a>/igm; 

if (window.document.body.innerHTML.search(re) >= 0) { 

var PREVIOUS_PAGE = RegExp.$1; 

}

如果搜下到"上一页",则定义
var PREVIOUS_PAGE = RegExp.$1; 

var re = /<a href=["']?([-=w./?]+)["']?>[[(<]?下一页[])>]?</a>/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的,firefox下无法执行,很多时候都是因为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;//左右键

希望本文所述对大家基于javascript的web程序设计有所帮助。

Javascript 相关文章推荐
js利用div背景,做一个竖线的效果。
Nov 22 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
Mar 18 Javascript
原生javascript和jquery判断浏览器版本等信息
Jul 04 Javascript
JavaScript的递归之递归与循环示例介绍
Aug 05 Javascript
js图片自动轮播代码分享(js图片轮播)
May 06 Javascript
js用typeof方法判断undefined类型
Jul 15 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
Sep 01 Javascript
JavaScript各类型的关系图解
Oct 16 Javascript
javascript 正则表达式分组、断言详解
Apr 20 Javascript
fullpage.js最后一屏滚动方式
Feb 06 Javascript
Vue页面骨架屏注入方法
May 13 Javascript
JavaScript实现简单的弹窗效果
May 19 Javascript
javascript实现iframe框架延时加载的方法
Oct 30 #Javascript
js中iframe调用父页面的方法
Oct 30 #Javascript
js防止页面被iframe调用的方法
Oct 30 #Javascript
escape函数解决js中ajax传递中文出现乱码问题
Oct 30 #Javascript
js防止DIV布局滚动时闪动的解决方法
Oct 30 #Javascript
js实现window.open不被拦截的解决方法汇总
Oct 30 #Javascript
一个JavaScript获取元素当前高度的实例
Oct 29 #Javascript
You might like
php 生成饼图 三维饼图
2009/09/28 PHP
一漂亮的PHP图片验证码实例
2014/03/21 PHP
php实现mysql封装类示例
2014/05/07 PHP
PHP中的随机性 你觉得自己幸运吗?
2016/01/22 PHP
js弹出层(jQuery插件形式附带reLoad功能)
2013/04/12 Javascript
JQuery的ready函数与JS的onload的区别详解
2013/11/21 Javascript
AngularJS实现全选反选功能
2015/12/08 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
2016/12/23 Javascript
jQuery插件echarts去掉垂直网格线用法示例
2017/03/03 Javascript
vue cli升级webapck4总结
2018/04/04 Javascript
JavaScript 中的12种循环遍历方法【总结】
2018/05/31 Javascript
React之PureComponent的使用作用
2018/07/10 Javascript
vue-cli 首屏加载优化问题
2018/11/06 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
JavaScript canvas动画实现时钟效果
2020/02/10 Javascript
Python获取linux主机ip的简单实现方法
2016/04/18 Python
Python通过future处理并发问题
2017/10/17 Python
一文了解Python并发编程的工程实现方法
2019/05/31 Python
python 中值滤波,椒盐去噪,图片增强实例
2019/12/18 Python
TensorFlow tf.nn.max_pool实现池化操作方式
2020/01/04 Python
Python3.7实现验证码登录方式代码实例
2020/02/14 Python
python matplotlib实现将图例放在图外
2020/04/17 Python
什么是典型的软件三层结构?软件设计为什么要分层?软件分层有什么好处?
2012/03/14 面试题
大学应届生求职简历的自我评价
2013/10/08 职场文书
有个性的自我评价范文
2013/11/15 职场文书
会计学个人自荐信模板
2013/12/13 职场文书
军训学生自我鉴定
2014/02/12 职场文书
领导班子对照检查材料
2014/09/22 职场文书
私用公车造成事故检讨书
2014/11/16 职场文书
工作失误检讨书
2015/01/26 职场文书
中考学习决心书
2015/02/04 职场文书
应届毕业生自荐信
2015/03/04 职场文书
2015年纪委工作总结
2015/05/13 职场文书
pyqt5打包成exe可执行文件的方法
2021/05/14 Python
Python安装使用Scrapy框架
2022/04/12 Python
Nginx的gzip相关介绍
2022/05/11 Servers