キーボードの入力に対応するプログラムを作るには、キーイベントを設定します。キーが入力されたタイミングで何か処理を行うには、以下のような関数を利用します。
関数名 | 説明 |
|---|---|
キー押した時 | キーを押した時に実行するイベント |
キー離した時 | キーを離した時に実行するイベント |
キータイピングした時 | キーをタイプした時に実行するイベント |
そして、変数「押されたキー」に押したキーの名前が代入されます。なお、キー入力イベントを取得できるのは、キーの入力ができるテキストボックスなどの部品、あるいは、ブラウザのページ全体を表す変数「DOCUMENT」です。
以下は、エディタにフォーカスを合わせて、何かキーを押すと、押されたキーを表示する例です。
ここでは、ページ全体のキー入力を得て、画面に押されたキーを表示するプログラムを作ってみましょう。プログラムを実行したら、適当なキーを押してみましょう。
キー入力に関するイベントには3つのイベントがありますが、どのような順番で発生するのかも確認してみましょう。例えば、[a]というキーを押した時の様子は以下のようになります。
それでは、「キー押した時」と「キータイピングした時」はどう違うのかでしょうか。最も大きな違いは、「キー押した時」と「キー離した時」ではShiftキーなどの修飾キーを押した時や、カーソルキーを押した時にもイベントが発生します。
しかし、「キータイピングした時」ではShiftキーやカーソルキーなどのキーは取得できません。その代わり、[Shift]キーと[a]キーを同時に押した時には、大文字の[A]が変数「押されたキー」に代入されます。
ユーザーのキー入力を無効にする場合には、DOMイベント処理停止を使います。
以下の例では、エディタを二つ作ります。1つ目はDOMイベント処理停止を呼ばず、2つ目は呼びます。2つ目のエディタでは文字が入力されません。