いわぶろ（ろてん）

はじめに

coderepos のコミット権限をいただきました．設定作業ありがとうございます！

さっそくテストを兼ねて，以前書いたスクリプト に改良を加え，KeyboardCommand.js としてコミットしてみました．

まぁ今まで書いてきたもののまとめのようなものですね．

概要

キーボードの入力順 （以下，コマンド） が，あらかじめ定義したものと一致した場合に，特定の処理を実行させる，そんなことをそれなりに簡単にするためのライブラリっぽいものです．

特徴

• コマンドには，任意の組み合わせを定義できます．「Shiftキー・Ctrlキー・Altキーといっしょ」も可能です．
• 入力成功時，入力失敗時，両方の処理を定義できます．
• 入力が無効になるまでの時間を指定することができます．
• コマンド入力を受け付ける html要素を指定できます．が，今のところフォーカス可能な要素，テキストボックスとかテキストエリアとか，にのみの対応です．
• 依存ライブラリとかはありません．

主な使い方

コマンドの定義は，次のように行います．

1
2
3
4
5
6
7
8
9
10
11
12

var konamicommand = [
  { code: 38 }  // ↑
, { code: 38 }  // ↑
, { code: 40 }  // ↓
, { code: 40 }  // ↓
, { code: 37 }  // ←
, { code: 39 }  // →
, { code: 37 }  // ←
, { code: 39 }  // →
, { code: 66 }  // b
, { code: 65 }  // a
];

次に，成功時の処理を定義します．

1
2
3
4

function func_success( elm, i ) {
  elm.value = 'おめでとう！' + i + '回目のパワーアップですね．';
  /* 処理 */
}

第1引数には，コマンド入力を受け付ける html要素オブジェクト，第2引数には，コマンド入力に成功した回数が，それぞれ入ります．

失敗時の処理についても同様に行うことができます．

で，これらを，

1

<input type="text" id="textbox" value="" />

のような要素に適用する場合，次のように書けばOKです．

1
2
3
4
5

new KeyboardCommand({
  command: konamicommand,
  target:  document.getElementById( 'textbox' ),
  success: func_success
});

このスクリプトを実行すると，id="textbox" なテキストボックスをフォーカス時に「コナミコマンド」を入力すると，そのテキストボックスにメッセージが現れます．

実行例

どんな感じかは，次で確認いただけます．

KeyboardCommand.js/example

ソースコード

share – Revision 25895: /lang/javascript/KeyboardCommand/trunk

この中の keyboardcommand.js です．

ざっと確認

• Firefox 3
• Opera 9.6
• Safari 3.2
• Internet Explorer 6

おわりに

特にイベント処理まわりをはじめ，要改良な部分が多々ありますが，よろしければお試しください．

こちらもあわせてどうぞ