Webページでキーボードによるページのリロードとページの戻る、進むの移動をブロックするコードを紹介します。
キーボードでのページのリロードをブロックする方法です。キーボードでは [Ctrl]+[R] キーでページをリロードします。また、[F5]キーでもページをリロードします。
JavaScriptでこの2つのキーの入力をブロックすると、キーボードによるリロードをブロックできます。
Webページで押されたキーを取得する方法はこちらの記事を参照してください。
取得したキーコードを判定して、該当するキーコードの場合に 'return false' を返して処理をブロックします。
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
document.onkeydown = keydown;
function keydown(event) {
if (event.ctrlKey == true) {
if (event.keyCode == 82) { //"R"
alert("このページではリロードできません。");
return false;
}
}
if (event.keyCode == 116) { //F5
alert("このページではリロードできません。");
return false;
}
}
</script>
</head>
<body>
<p>リロードをブロックするデモ</p>
<textarea cols="64" rows="12"></textarea>
</body>
</html>
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
テキストボックスに文字列を入力します。
ページのリロードのショートカットキーである[Ctrl]+[R]キーまたは、[F5]キーを押します。
下図のアラートダイアログが表示され、リロードがブロックされます。
keydown 関数を空にして、同じ操作をすると、ページがリロードされ、テキストボックスの内容はクリアされます。
function keydown(event) {
}
キーボードでのページの戻る、進むをブロックする方法です。キーボードでは [Alt]+[←] キーでページを戻ります。また、[Alt]+[→]キーでページを進みます。
JavaScriptでこの2つのキーの入力をブロックすると、キーボードによるページの戻る、進む操作をブロックできます。
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
document.onkeydown = keydown;
function keydown(event) {
if (event.altKey == true) {
if (event.keyCode == 37 || event.keyCode == 39) { //"←" "→"
alert("このページではページ移動できません。");
return false;
}
}
}
</script>
</head>
<body>
<p>キーボードの戻る、進むをブロックするデモ</p>
<textarea cols="64" rows="12"></textarea>
</body>
</html>
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
テキストボックスに文字列を入力します。
ページを戻る、または進むショートカットキーの[Alt]+[←]キーまたは、[Alt]+[→]キーを押します。
下図のアラートダイアログが表示され、ページのナビゲーションがブロックされます。
keydown 関数を空にして、同じ操作をすると、ページのナビゲーションが実行され、テキストボックスの内容はクリアされます。
function keydown(event) {
}
