Js method to realize web page keyboard control page turning

Js method to realize web page keyboard control page turning_javascript skills

WBOY

Release： 2016-05-16 16:32:44

Original

1682 people have browsed it

The example in this article describes the method of using JS to control page turning via keyboard on a web page. Share it with everyone for your reference. The specific implementation method is as follows:

I think we are not seeing the keyboard-controlled page turning effect. Often on many websites, especially photo albums, you can directly use the keyboard to turn up and down pages. The principle is very simple. Just use js to monitor whether the user presses the up or down button. Just press the key.

For example:

Copy code The code is as follows:

Previous Chapter
Return to directory
Next Chapter

The js code is as follows:

Copy code The code is as follows:

I saw this function from the Internet today. It’s good. I can add this function to the article in the future

Copy code The code is as follows:

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

If you search to "previous page", define

Copy code The code is as follows:

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

If you search to "next page", define

Copy code The code is 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 for 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 or previous page. Nowadays, many codes on the Internet are from IE and cannot be executed under Firefox. Many times it is because FF does not support non-standard Caused by **.click(), the click operation on the A tag under IE will be redirected to the corresponding URL by default, but this 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: capture when the user clicks the right arrow key and assign the href attribute of A on the next page to window.location.href.

Copy code The code is 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 the 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 right keys

I hope this article will be helpful to everyone’s web programming based on JavaScript.