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 相关文章推荐
json-lib出现There is a cycle in the hierarchy解决办法
Feb 24 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
May 02 Javascript
node.js中的buffer.length方法使用说明
Dec 14 Javascript
创建、调用JavaScript对象的方法集锦
Dec 24 Javascript
初步使用bootstrap快速创建页面
Mar 03 Javascript
js实现密码强度检测【附示例】
Mar 30 Javascript
每日十条JavaScript经验技巧(二)
Jun 23 Javascript
简单分析javascript中的函数
Sep 10 Javascript
vue微信分享 vue实现当前页面分享其他页面
Dec 02 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
小程序实现图片预览裁剪插件
Nov 22 Javascript
node事件循环和process模块实例分析
Feb 14 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常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
javascript实现动态增加删除表格行(兼容IE/FF)
2007/04/02 Javascript
javascript定时保存表单数据的代码
2011/03/17 Javascript
JavaScript中number转换成string介绍
2014/12/31 Javascript
jQuery插件Timelinr 实现时间轴特效
2015/10/04 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
2015/11/18 Javascript
JS正则表达式比较常见用法
2016/01/26 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
2016/11/09 Javascript
ES6中module模块化开发实例浅析
2017/04/06 Javascript
javaScript 逻辑运算符使用技巧整理
2017/05/03 Javascript
浅析Angular 实现一个repeat指令的方法
2019/07/21 Javascript
layui表格内容溢出的解决方法
2019/09/06 Javascript
vue中如何添加百度统计代码
2020/12/19 Vue.js
[05:31]DOTA2英雄梦之声_第08期_莉娜
2014/06/23 DOTA
[15:35]教你分分钟做大人:天怒法师
2014/10/30 DOTA
Python获取电脑硬件信息及状态的实现方法
2014/08/29 Python
Python使用Pycrypto库进行RSA加密的方法详解
2016/06/06 Python
win与linux系统中python requests 安装
2016/12/04 Python
python万年历实现代码 含运行结果
2017/05/20 Python
python实现祝福弹窗效果
2019/04/07 Python
python 模拟贷款卡号生成规则过程解析
2019/08/30 Python
python 实现二维字典的键值合并等函数
2019/12/06 Python
python 插入日期数据到Oracle实例
2020/03/02 Python
利用Python脚本批量生成SQL语句
2020/03/04 Python
iHerb香港:维生素、补充剂和天然保健品
2017/08/01 全球购物
医学生实习自荐信
2013/10/01 职场文书
致跳高运动员加油稿
2014/02/12 职场文书
地球一小时倡议书
2014/04/15 职场文书
小学优秀班集体申报材料
2014/05/25 职场文书
民事诉讼代理授权委托书范本
2014/10/08 职场文书
2015年高一班主任工作总结
2015/05/13 职场文书
民事答辩状格式范文
2015/05/21 职场文书
第一军规观后感
2015/06/12 职场文书
ThinkPHP5和ThinkPHP6的区别
2021/03/31 PHP
Echarts如何重新渲染实例详解
2022/05/30 Javascript
CSS使用Flex和Grid布局实现3D骰子
2022/08/05 HTML / CSS