クロスブラウザでのJavaScriptキーボードイベントの扱い方

スポンサードリンク

JavaScriptでのキーボードイベント処理 bookmark

JavaScriptでのキーボードイベントの処理はブラウザによって違っていて、クロスブラウザで動作させるためには、それぞれのブラウザに合ったコードを実行し分ける必要があります。

JavaScriptでキーボードイベントを取得し、どのキーコードが押されたかを判別するサンプルを以下に示します。CtrlキーやShiftキーが押されたかどうかなどのチェック方法も併せて示しています。

このサンプルを活用することで、Webアプリケーションにショートカット機能をつけ、より使い勝手のよいWebアプリケーションを作成する手助けになるはずです。

<html>
<title>クロスブラウザでキーボードイベントを処理する方法</title>
<script type="text/javascript">

</script>
<body>
press keycode
</body>
</html>

キーコードの処理方法は、Mozilla/Opera系とIEで処理方法が違ってきます。違うのはキーコードの処理部分だけで、あとはどのキーが押されたかをチェックして処理を行うだけです。

サンプルでは、「Ctrl+C」、「Shift+C」、「C」のコードが押された際にalertで押された旨を表示するようになっています。処理したいキーコードを書き換えるだけで自由にキーボードショートカット等の機能を容易に実装できるでしょう。

尚、Firefoxの場合、IMEがOnになっていると同じキーコードしか打てなくなってしまう問題がありますので注意が必要です。

スポンサードリンク