快捷導(dǎo)航

Js實(shí)現(xiàn)網(wǎng)頁鍵盤控制翻頁的方法

更新時間：2014年10月30日 11:16:50 投稿：shichen2014

這篇文章主要介紹了Js實(shí)現(xiàn)網(wǎng)頁鍵盤控制翻頁的方法,較為詳細(xì)的分析了Js實(shí)現(xiàn)網(wǎng)頁鍵盤控制翻頁的原理與具體實(shí)現(xiàn)方法,非常具有實(shí)用價值,需要的朋友可以參考下

本文實(shí)例講述了Js實(shí)現(xiàn)網(wǎng)頁鍵盤控制翻頁的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

鍵盤控制翻頁效果我想我們不少見了，經(jīng)常在很多網(wǎng)站特別是相冊的效果都可以直接使用鍵盤進(jìn)行上下頁進(jìn)行翻頁了，原理很簡單，只要利用js監(jiān)測用戶是否有按上下鍵即可實(shí)現(xiàn)。

舉例如下：

復(fù)制代碼代碼如下:

<a id="last" href="<?=$lefturl?>">上一章</a>

<a id="booklist" href="<?=$booklisturl?>">返回目錄</a>

<a id="next" href="<?=$righturl?>">下一章</a>

js代碼如下：

復(fù)制代碼代碼如下:

<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>

今天從網(wǎng)上看到這個功能,不錯啊,以后就可以在文章中,增加這個功能了

復(fù)制代碼代碼如下:

var re = /<a href=["']?([-=w./?]+)["']?>[[(<]?上一頁[])>]?</a>/igm; 

if (window.document.body.innerHTML.search(re) >= 0) { 

var PREVIOUS_PAGE = RegExp.$1; 

}

如果搜下到"上一頁",則定義

復(fù)制代碼代碼如下:

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; 

}

如果搜下到"下一頁",則定義

復(fù)制代碼代碼如下:

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; 

} 

} 

} 

}

下面說一下我做過的一個上下翻頁的快捷鍵實(shí)現(xiàn)。當(dāng)用戶點(diǎn)擊左右方向鍵時，js獲取鍵盤代碼，然后跳轉(zhuǎn)到下一頁或者上一頁，現(xiàn)在網(wǎng)上很多代碼都是ie的，firefox下無法執(zhí)行，很多時候都是因?yàn)閒f下不支持非標(biāo)準(zhǔn)的**.click()造成的，ie下對A標(biāo)簽進(jìn)行click操作默認(rèn)轉(zhuǎn)到了相應(yīng)的網(wǎng)址，而ff下不可行（onClick()倒是可以，不過這是執(zhí)行的A的onClick事件）。

解決辦法也很簡單，我們可以采用這個方法：捕獲用戶點(diǎn)擊右方向鍵時，把下一頁的A的href屬性賦給window.location.href就可以了。

復(fù)制代碼代碼如下:

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;//左右鍵