Js: webpage keyboard control paging method, js webpage keyboard flip

Js: webpage keyboard control paging method, js webpage keyboard flip

This example describes how to implement webpage keyboard control for pages in JavaScript. Share it with you for your reference. The specific implementation method is as follows:

I have seen many of the effects of keyboard control on page turning. Many websites, especially photo albums, can use the keyboard to perform page turning on the top and bottom pages. The principle is very simple, you only need to use js to monitor whether you have pressed the up or down key.

Example:

Copy codeThe Code is as follows: <a id = "last" href = "<? = $ Lefturl?> "> Previous chapter </a>
<A id = "booklist" href = "<? = $ Booklisturl?> "> Return directory </a>
<A id = "next" href = "<? = $ Righturl?> "> Next chapter </a>
The js Code is as follows:

Copy codeThe Code is 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 can see this function on the internet today. It's good. I will be able to add this function in my article later.

Copy codeThe Code is as follows: var re =/<a href = ["']? ([-= W./?] +) ["']?> [[(<]? Previous Page [])>]? </A>/igm;
If (registry.doc ument. body. innerHTML. search (re)> = 0 ){
Var PREVIOUS_PAGE = RegExp. $1;
}
If you search for "Previous Page", defineCopy codeThe Code is as follows: var PREVIOUS_PAGE = RegExp. $1;
Var re =/<a href = ["']? ([-= W./?] +) ["']?> [[(<]? Next page [])>]? </A>/igm;
If (registry.doc ument. body. innerHTML. search (re)> = 0 ){
Var NEXT_PAGE = RegExp. $1;
}
If you search for the next page, defineCopy codeThe Code is as follows: var NEXT_PAGE = RegExp. $1;
If (typeof previus_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 previus_page = "string "){
Window. location. href = previus_page;
}
Else if (event. keyCode = 39/* Arrow Right */& typeof NEXT_PAGE = "string "){
Window. location. href = NEXT_PAGE;
}
}
}
}
The following describes how to implement a shortcut key for turning pages up and down. When a user clicks the left and right arrow keys, js obtains the keyboard code and jumps to the next page or the previous page. Currently, many code on the internet is ie and cannot be executed in firefox, most of the time, it is because ff does not support non-standard **. click (). By default, the click operation on the label in ie is switched to the corresponding URL, while the onClick () operation is not feasible in ff, but this is the onClick event of Execution ).

The solution is also very simple. We can use this method: when the user clicks the right arrow key, the href attribute of A on the next page is assigned to window. location. href.

Copy codeThe 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; // obtain 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 help you with javascript-based web programming.

A js paging Method

If the data volume is too large, sending all the data to the page will also slow the page. Of course, if the amount of data is dozens of such an order of magnitude, you can also.

If you do not refresh, there are two methods:
First, in ajax mode, JS requests a server program and passes in the page number. This program obtains only one page of data at a time. This is also a common method. Paging is implemented by the server.
Second, you want to upload all the organized data to the page and display it by page in JS mode. For this type of paging, you can use the array subscript for paging:
For example, if there are 10 pieces of data on each page, the data marked as 0-9 is displayed on the first page, and the second page is 10-19. You should check the paging algorithm.
Data can be displayed in a container (DIV or TABLE). Each time you flip the page, replace the content of the container (such as the innerHTML of the container ).

For example, if your array is data [] and the container used to display is <div id = "viewdata"> </div>, you can probably do this:
------------------------------------
<Script>
Function showdata (pageindex)
{
Var pagesize = 10;
Var recordstart = (pageindex-1) * pagesize
Var strhtml = '';
For (var I = 0; I <pagesize; I ++)
{
Var recordindex = recordstart + I;
/*
Here, the HTML string of the Data Organization marked as recordindex is removed, for example:
Strhtml + = data [recordindex];
*/
}
Document. getElementById ('viewdata'). innerHTML = strhtml;
}
</Script>
<Div id = "viewdata"> </div>
<A href = "javascript: showdata (1)"> page 1 </a>
<A href = "javascript: showdata (2)"> page 2 </a>
....
-------------------------------------
To know the total number of pages, you can use this algorithm:
Var pagecount = parseInt (data. length-1)/pagesize) + 1

Use JS to capture Keyboard Events to control page controls

Call the onkeydown or onkeyup function and use keycode to determine which key is pressed by the current keyboard. [each key pair on the keyboard should have a keycode value]