【jQuery】キーボードの押されたキーを取得

最近、高級ヘッドフォンの音質にびっくりしたYu-ichiです:neko:

ちょっと欲しくなったけど、値段を見てやめました。
(さすがに6桁はちょっと・・・)

さて今回は、役に立つのか立たないのかわからないシリーズとして、
jQueryを使って押されたキーの値を取得するスクリプトをご紹介します。

まずは動作を確認してみてください。
キーボードの適当なキーを押すと、キーコードが下のボックスに表示されます。

ここにキーコードが表示→

どうでしょうか?
「A」を押すと「65」、「B」を押すと「66」が表示されたかと思います。

ただこれだけだとなんの意味があるの?と思うかもしれませんが、キーコードが取得できるということは、押されたキーを認識してアクションを起こすスクリプトを書いたりすることができるということです。
つまりは組み合わせ次第で面白いことができるのです。

【ここで使ったサンプルコードを紹介します。】

キーを表示するテキストボックス

<input id="key" size="10" type="text" />

キーを取得するスクリプト

<script type="text/javascript">
jQuery(function($){
$(window).keyup(function(e){
$('#key').val(e.keyCode);
});
});
</script>

これだけで、とりあえずはキーを取得して表示できます。
いろいろと試してみてください。:neko:

トラックバックURL