Home > Web Front-end > JS Tutorial > body text

Js method to realize web page keyboard control page turning_javascript skills

WBOY
Release: 2016-05-16 16:32:44
Original
1621 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:

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:

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.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!