Js實現網頁鍵盤控制翻頁的方法

2019-11-20 13:58:49

字體：大中小

來源：轉載

供稿：網友

本文實例講述了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;//左右鍵