Js實作網頁鍵盤控制翻頁的方法_javascript技巧

本文實例講述了Js實作網頁鍵盤控制翻頁的方法。分享給大家供大家參考。具體實作方法如下：

鍵盤控制翻頁效果我想我們不少見了，​​經常在很多網站特別是相冊的效果都可以直接使用鍵盤進行上一頁進行翻頁了，原理很簡單，只要利用js監測用戶是否有按上下鍵即可實現。

舉例如下：

複製程式碼 程式碼如下:

上一章
回目錄
下一章

js程式碼如下：

複製程式碼 程式碼如下:

今天從網路上看到這個功能,不錯啊,以後就可以在文章中,增加這個功能了

複製程式碼 程式碼如下:

var re = /[[(]?/igm;
if (window.document.body.innerHTML.search(re) >= 0) {
var PREVIOUS_PAGE = RegExp.$1;
}

若搜下到"上一頁",則定義

複製代碼 代碼如下:

var PREVIOUS_PAGE = RegExp.$1 ;
var re = /[[(]?/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程式設計有所幫助。