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

2024-05-06 16:10:13

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

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

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

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

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

解決辦法也很簡單，我們可以采用這個方法：捕獲用戶點擊右方向鍵時，把下一頁的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;//左右鍵