This article describes the method of Js to control page turnover by implementing web keyboard. Share it for your reference. The specific implementation method is as follows:
I think it is uncommon for keyboard control page turnover effects. Often, on many websites, especially photo albums, you can use the keyboard to turn pages up and down. The principle is very simple. Just use js to monitor whether the user has pressed the up and down keys.
As an example:
Copy the code as follows:<a id="last" href="<?=$lefturl?>">Previous Chapter</a>
<a id="booklist" href="<?=$booklisturl?>">Return to directory</a>
<a id="next" href="<?=$righturl?>">Next Chapter</a>
The js code is as follows:
Copy the code as follows:<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>
I saw this function online today. It's great. I can add this function in the article in the future.
The code copy is as follows: var re = /<a href=["']?([-=w./?]+)["']?>[[(<]?Previous page[])>]?</a>/igm;
if (window.document.body.innerHTML.search(re) >= 0) {
var PREVIOUS_PAGE = RegExp.$1;
}
If you search to "Previous page", the copy code is defined as follows: var PREVIOUS_PAGE = RegExp.$1;
var re = /<a href=["']?([-=w./?]+)["']?>[[(<]?Next page[])>]?</a>/igm;
if (window.document.body.innerHTML.search(re) >= 0) {
var NEXT_PAGE = RegExp.$1;
}
If you search to "Next Page", the copy code is defined as follows: 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;
}
}
}
}
Let me talk about a shortcut key implementation of page-up and down that I have made. When the user clicks the left and right arrow keys, js gets the keyboard code and then jumps to the next page or the previous page. Nowadays, many codes on the Internet are ie. Firefox cannot be executed. Many times, it is caused by the non-standard **.click() under ff. Click the A tag under ie. By default, it is transferred to the corresponding URL, but it is not feasible under ff (onClick() is OK, but this is the onClick event of A executed).
The solution is also very simple. We can use this method: when the user clicks the right arrow key, just assign the href attribute of A on the next page to window.location.href.
Copy the code as follows: var $=function(id)
{
return document.getElementById(id);
}
var hotKey=function(e)
{
var e =e||event;
var k = e.keyCode||e.which||e.charCode;//Get key code
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;//Left and left keys
I hope that the description in this article will be helpful to everyone's web programming based on javascript.