Webページのキーボード制御ページめくりを実現するJSメソッド_JavaScriptスキル

この記事の例では、JS を使用して Web ページ上のキーボードによるページめくりを制御する方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。

多くの Web サイト、特にフォト アルバムでは、キーボードを使用してページをめくる効果は見られないように思います。その原理は、js を使用するだけで非常に簡単です。ユーザーが上ボタンを押すか下ボタンを押すかだけです。

例:

コードをコピー コードは次のとおりです:

前の章
ディレクトリに戻る
次の章

js コードは次のとおりです:

コードをコピー コードは次のとおりです:

今日インターネットでこの機能を知りました。今後この機能を記事に追加できます。

コードをコピー コードは次のとおりです。

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

「前のページ」に検索する場合は、

コードをコピー と定義します。 コードは次のとおりです:

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

「次のページ」まで検索する場合は、

コードをコピーします コードは次のとおりです:

var NEXT_PAGE = RegExp。 $1 ;
if (PREVIOUS_PAGE のタイプ == "文字列" || NEXT_PAGE のタイプ == "文字列") {
document.onkeydown = function() {
switch (event.srcElement.tagName) {
ケース "入力":
ケース「TEXTAREA」:
ケース "SELECT":
休憩
デフォルト:
if (event.keyCode == 37 /* 左矢印*/ && typeof PREVIOUS_PAGE == "string") {
window.location.href = 前のページ
}
else if (event.keyCode == 39 /* 右矢印 */ && typeof NEXT_PAGE == "string") {
window.location.href = NEXT_PAGE; }
}
}
}

私が作ったページ上下のショートカットキー実装についてお話します。ユーザーが左右の矢印キーをクリックすると、js はキーボード コードを取得し、次または前のページにジャンプします。現在、インターネット上のコードの多くは Firefox で実行できません。非標準はサポートしていません **.click() が原因で、IE での A タグのクリック操作はデフォルトで対応する URL にリダイレクトされますが、これは FF では実行できません (onClick() は OK ですが、これはA の onClick イベントが実行されました)。
解決策も非常に簡単です。ユーザーが右矢印キーをクリックしたときをキャプチャし、次のページの A の href 属性を window.location.href に割り当てます。

コードをコピー コードは次のとおりです:

var $=function(id)
{
document.getElementById(id);
を返す }
var hotKey=function(e)
{
var e =e||イベント;
var k = e.keyCode||e.that||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 //左右のキー

この記事が皆さんの JavaScript ベースの Web プログラミングに役立つことを願っています。