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 相关文章推荐
javascript中关于break,continue的特殊用法与介绍
May 24 Javascript
判断输入是否为空,获得输入类型的JS代码
Oct 30 Javascript
使用jquery自定义鼠标样式满足个性需求
Nov 05 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
Jul 14 Javascript
Bootstrap轮播图的使用和理解4
Dec 14 Javascript
js设置随机切换背景图片的简单实例
Nov 12 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
Jul 30 Javascript
详解es6超好用的语法糖Decorator
Aug 01 Javascript
微信小程序自定义select下拉选项框组件的实现代码
Aug 28 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
Dec 02 Javascript
JavaScript indexOf()原理及使用方法详解
Jul 09 Javascript
Node.js 中如何收集和解析命令行参数
Jan 08 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录入页面中动态从数据库中提取数据的实现
2006/10/09 PHP
phpfans留言版用到的数据操作类和分页类
2007/01/04 PHP
PHP imagecreatefrombmp 从BMP文件或URL新建一图像
2012/07/16 PHP
php使用curl简单抓取远程url的方法
2015/03/13 PHP
PHP的Laravel框架中使用消息队列queue及异步队列的方法
2016/03/21 PHP
PHP使用xpath解析XML的方法详解
2017/05/20 PHP
利用php操作memcache缓存的基础方法示例
2017/08/02 PHP
PHP使用POP3读取邮箱接收邮件的示例代码
2020/07/08 PHP
Prototype Object对象 学习
2009/07/12 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
2014/01/02 Javascript
jQuery团购倒计时特效实现方法
2015/05/07 Javascript
JS实现点击上移下移LI行数据的方法
2015/08/05 Javascript
表单验证插件Validation应用的实例讲解
2015/10/10 Javascript
封装获取dom元素的简单实例
2016/07/08 Javascript
JavaScript实现DOM对象选择器
2016/09/24 Javascript
深入理解Vuex 模块化(module)
2017/09/26 Javascript
JavaScript设计模式之建造者模式实例教程
2018/07/02 Javascript
在Vue项目中引入JQuery-ui插件的讲解
2019/01/27 jQuery
一步快速解决微信小程序中textarea层级太高遮挡其他组件
2019/03/04 Javascript
Python中的闭包实例详解
2014/08/29 Python
Python正则表达式匹配ip地址实例
2014/10/09 Python
Python实现查看系统启动项功能示例
2018/05/10 Python
详解Django模版中加载静态文件配置方法
2019/07/21 Python
Python如何使用Gitlab API实现批量的合并分支
2019/11/27 Python
Python 面向对象静态方法、类方法、属性方法知识点小结
2020/03/09 Python
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
2013/11/07 HTML / CSS
北美最大的手工艺品零售商之一:Michaels Stores
2019/02/27 全球购物
智能家居、吸尘器、滑板车、电动自行车网上购物:Geekmaxi
2021/01/18 全球购物
师范生个人推荐信
2013/11/29 职场文书
元旦联欢会感言
2014/03/04 职场文书
司法建议书范文
2014/05/13 职场文书
大学新生入学教育方案
2014/05/16 职场文书
2015年社区综治工作总结
2015/04/21 职场文书
2015学校师德师风工作总结
2015/04/22 职场文书
上班旷工检讨书
2015/08/15 职场文书
浅析InnoDB索引结构
2021/04/05 MySQL