Enter キーへの応答

例えば、検索ボックスへ検索キーワードを入力してから検索を開始するときのことを考えてください。検索キーワードを入力した後、「検索ボタン」をクリックしないと検索が開始しない場合より、 Enter キーを押下することによっても検索が始まるほうが使い勝手がよいといえます。

簡単なハウツーものになりますが、この資料ではテキストボックスで Enter キーを押下したときにイベント処理を行う方法について書きます。

デモ

ここで作るプログラムのデモです。下のテキストボックスに文字を入力し、Enter キーを押下または横の OK ボタンをクリックしてください。 OK ボタンをクリックしたときと同じ動作を、Enter キーを押下した時にも実行します。(ここでは単にポップアップメッセージを表示するだけです)

テキストボックスへのイベントの設定

window のロードイベントにて、イベントハンドラを設定します。


Event.observe(window, 'load', window_onload);


function window_onload(){
     set_event_handlers();
}

function set_event_handlers(){

     if($('scr26_txt')){
          Event.observe('scr26_txt','keydown',scr26_txt_onkeydown);
     }
     
     if($('scr26_btn')){
          Event.observe('scr26_btn','click',scr26_btn_onclick);
     }

}

ここでは prototype.js の Event.observe を利用しています。また、ボタンに対するイベントハンドラも設定しています。

ボタンクリック時の動作

Enter キー押下の部分より先に、ボタンクリック時の動作を見ておきましょう。

ボタンをクリックしたた時には、直ちに do_something という名前の関数を呼び出します。

function scr26_btn_onclick(evt){

     do_something();

}

do_something 関数では以下のように、テキストボックスの値を取得し、alert 関数によってポップアップ表示します。

function do_something(){

     var tb = $('scr26_txt');
     
     if(!tb){
          return;
     }

     alert( tb.value );
     
}

では次に本題の Enter キー押下時の動作を考えます。

ここでは、テキストボックス上で Enter キーを押した場合に、do_something 関数を呼び出しましょう。

テキストボックス上の keydown イベント処理

出来上がりのコードは次のようになります。

function scr26_txt_onkeydown(evt){

     var e;
     
     try {
          e = evt || event;
     }
     catch(ex){
          return;
     }

     if(!e){
          return;
     }

     if( e.keyCode == 13 ) {
          do_something();     
     }
     
}

それぞれの処理を見て行きましょう。

     var e;
     
     try {
          e = evt || event;
     }
     catch(ex){
          return;
     }

この部分ではイベントオブジェクトを取得しています。

念のため JavaScript の簡単なおさらいをしますと、Z = A || B という書き方は、Z = A ? A : B と同じ意味になります。すなわち、A が null 以外の場合は A が、A が null の場合は B が Z に代入されます。

Event.observe でイベントハンドラを追加した場合 (IE では attachEvent, W3C では addEventListener)、イベントハンドラの引数にイベントオブジェクトが渡されます。しかし、HTML の属性として onkeydown としてイベントハンドラを追加したときには、 IE では event からイベントオブジェクトが取得できます。IE 以外では宣言されていない event にアクセスすることで例外が発生します。

このことから、イベントオブジェクトひとつ取るだけで上記のようなコードになっています。

     if( e.keyCode == 13 ) {
          do_something();     
     }

キーボードイベントオブジェクトでは、keyCode プロパティにキーコードが入ります。 Enter キーの場合ここに 13 が入るので、keyCode プロパティが 13 である場合に、do_something 関数を呼び出しています。