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 相关文章推荐
jQuery的强大选择器小结
Dec 27 Javascript
js hover 定时器(实例代码)
Nov 12 Javascript
javascript实现信息的显示和隐藏如注册页面
Dec 03 Javascript
用js将内容复制到剪贴板兼容浏览器
Mar 18 Javascript
谷歌浏览器调试JavaScript小技巧
Dec 29 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
Oct 20 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
Dec 27 Javascript
关于javascript sort()排序你可能忽略的一点理解
Jul 18 Javascript
详解如何使用babel进行es6文件的编译
May 29 Javascript
vue watch深度监听对象实现数据联动效果
Aug 16 Javascript
Bootstrap实现省市区三级联动(亲测可用)
Jul 26 Javascript
js实现页面图片消除效果
Mar 24 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+MYSQL的文章管理系统(二)
2006/10/09 PHP
Yii框架关联查询with用法分析
2014/12/02 PHP
php array_key_exists() 与 isset() 的区别
2016/10/24 PHP
PHP实现找出有序数组中绝对值最小的数算法分析
2017/08/07 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
jQuery 加上最后自己的验证
2009/11/04 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
2013/07/04 Javascript
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
JQuery DIV 动态隐藏和显示的方法
2016/06/23 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
JavaScript中的高级函数
2018/01/04 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
浅析Vue.js 中的条件渲染指令
2018/11/19 Javascript
jqGrid表格底部汇总、合计行footerrow处理
2019/08/21 Javascript
关于layui时间回显问题的解决方法
2019/09/24 Javascript
js判断密码强度的方法
2020/03/18 Javascript
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
centos6.7安装python2.7.11的具体方法
2017/01/16 Python
Python 3实战爬虫之爬取京东图书的图片详解
2017/10/09 Python
python中 logging的使用详解
2017/10/25 Python
详谈Numpy中数组重塑、合并与拆分方法
2018/04/17 Python
Python使用ConfigParser模块操作配置文件的方法
2018/06/29 Python
Python数据可视化:幂律分布实例详解
2019/12/07 Python
Python3中对json格式数据的分析处理
2021/01/28 Python
Lou & Grey美国官网:主打舒适性面料服饰
2017/12/21 全球购物
Falconeri美国官网:由羊绒和羊毛制成的针织服装
2018/04/08 全球购物
专科毕业生自我鉴定
2013/12/01 职场文书
车间工艺员岗位职责
2013/12/09 职场文书
《金色的脚印》教后反思
2014/04/23 职场文书
辞旧迎新演讲稿
2014/09/15 职场文书
大学生学习新党章思想汇报
2014/10/25 职场文书
简历自荐信范文
2015/03/09 职场文书
“5.12”护士节主持词
2015/07/04 职场文书
毕业生自荐求职信书写的技巧
2019/08/26 职场文书
golang协程池模拟实现群发邮件功能
2021/05/02 Golang
Java GUI编程菜单组件实例详解
2022/04/07 Java/Android