こんにちは。
今回は、お問い合わせとしてよくいただく「Internet Explorer 11 でショートカット キーを抑止したい」について記載します。
本記事に記載の内容が、今後の Web 開発における仕様検討にお役に立てますと幸いです。
これまでどうしていたか？
ショートカット キーの抑止に関して、実は Web 標準として定められたものはありません。
ショートカット キーは、各ベンダーが開発しているブラウザーごとにそれぞれ任意に用意されていることが一般的です。
Internet Explorer では、例えば、Alt + Home キーでホームページへ戻る動作となります。
Internet Explorer 11 のキーボード ショートカット
https://support.microsoft.com/ja-jp/help/15357/windows-internet-explorer-11-keyboard-shortcuts
では、これまで Web 開発者はショートカット キーを抑止するにはどういう方法を取っていたのでしょうか。
多くは下記のように keyCode プロパティを 0 に書き換える、もしくは return false とする実装としていることがほとんどではないかと思います。
document.onkeydown = function() {
event.keyCode = 0;
return false;
}
Internet Explorer 11 での動作について
Internet Explorer 11 上の最新のドキュメント モードでは、上述した処理によりキーボード ショートカットを抑止することはできなくなりました。
これまでのバージョンの Internet Explorer では、キーボード操作などにより発火されるイベントは MSEventObj オブジェクトという Internet Explorer 独自のイベント オブジェクトが利用されていました。
しかしながら、Internet Explorer 11 では、可能な限り Web 標準に準拠した作りとするため、イベント オブジェクトについても W3C の策定する DOM3 の標準に従った、window.event オブジェクトに変更しています。
ウィンドウ イベントの動作の変更
https://msdn.microsoft.com/ja-jp/library/dn384058(v=vs.85).aspx
Event
https://developer.mozilla.org/en-US/docs/Web/API/Event
Web 標準では keyCode プロパティは “読み取り専用” と定義されており、Internet Explorer 11 においても本定義に準拠した結果、Internet Explorer 11 標準ドキュメント モードでは上述している方法でのショートカット キーの抑止はできなくなりました。
KeyboardEvent
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent
なお、過度なショートカット キーの抑止は、ブラウザー クラッシャーと判断されかねない恐れもあることから、あまりおすすめできるものではありません。
どうすれば良いか？
ここまで記載した通り、これまでの抑止方法は “Internet Explorer の動作に依存した方法” であり、これまでの Internet Explorer の動作上うまく抑止ができていた方法となります。
昨今では各ベンダーより様々なブラウザーが開発され、ユーザーが利用するブラウザーの大半が Internet Explorer だという時代は残念ながら過ぎ去ってしまっています。
このような背景から、最近では Web サイトにおいても「相互運用性」という点が非常に重要になってきました。
「相互運用性」とは、どのブラウザーで閲覧しても、同じように表示する、同じように動作する、同じような体験ができる、というようなことを言います。
この点を踏まえると、各ブラウザーの動作に依存した抑止方法を検討するのではなく、
「ショートカット キーを押下されても良い構造とする方法」
を検討することが重要となります。
では、どうすれば良いでしょうか？
ショートカット キーを抑止したい、という背景には、ある決められた手順に従ってページ遷移をしないといけない、といったような Web ページの構造上の制約があることが多々あります。
この点を考慮し、考えられるポイントはいくつかあります。
onbeforeunload イベントを活用する
onbeforeunload イベントで、文字列を return する実装とすることにより、ウィンドウを閉じようとした場合、別のページに遷移しようとした場合、などにおいてメッセージを表示させることが可能です。
また、本当に遷移が必要な処理の場合にのみ onbeforeunload イベントからイベント ハンドラを削除することで正常にページの遷移が可能です。
<html><head>
<meta http-equiv="X-UA-Compatible" content="IE=11" />
<script type="text/javascript">
window.onbeforeunload = function() {
return "入力中の内容が破棄されますが問題ありませんか？";
}
function onSubmit(form) {
window.onbeforeunload = null;
form.submit();
return false;
}
</script>
</head>
<body>
<form onsubmit="onSubmit(this);">
<input type="text" />
<input type="submit" />
</form>
</body></html>
DOMStorage といったローカル上に保存できる仕組みを活用する
ページ遷移を行うたびに、JavaScript などでこれまでの情報を localStorage などに保存しておくような構造とすることにより、万が一、ブラウザーが閉じられた場合や別のサイトに遷移した場合にも、次回ページ表示時に localStorage から情報を読み込むことで復元することが可能と考えられます。
(情報の保持の仕方や復元方法などについては、各 Web アプリケーションごとに仕組みを検討いただく必要はあります)
DOM ストレージの概要
https://msdn.microsoft.com/ja-jp/library/cc197062(v=vs.85).aspx
Web サーバー側で情報を保持する仕組みを用意する
同じように、ページ遷移を行うたびに Web サーバー側で情報を保存しておくような構造とすることでも DOMStorage と同様に対処が可能と考えられます。
(本方法も、情報の保持の仕方や復元方法などについては、各 Web アプリケーションごとに仕組みを検討いただく必要はあります)
いかがでしたでしょうか。
今後の Web 開発において参考となれば幸いです。