2009年6月4日木曜日

jQuery::Up/Downキーでフォームを移動、パート3:フォーカスされた要素を見つける

次はフォーカスされているフォームの要素を見つける方法について。 最初は「this.focused();」なんて関数があるとばかり思っていた。 ところがフォーカスされた要素を返す関数が無いどころか、要素のプロパティにも現在フォーカスがあたっているかどうか判別できるものが無い! 仕方が無い、作るか・・・ 簡単な動作は以下の通り。
  1. フォーカスを調べたい要素の一覧を作成。
  2. フォーカスがあたった時点で、どこかの変数に要素の情報を記録。
すでに1については作成済み。ちなみに変数名が「jFormElem」。 そして2についてもjQueryを使うと非常に簡単に出来た。
// フォームエレメントがフォーカスされたら記録。
$(jFormElem).focus( function() {
focusElem = jQuery( this );
});
簡単に説明すると、
  • $( jFormElem ) 前もって作成していた要素の配列のそれぞれについて、
  • .focus( function() { フォーカスがあたったらfunction()で設定されている処理を
  • focus Elem = jQuery( this ) 「focusElem」という変数に自分自身を保存。 jQuery()で囲ってあげることで、普通のDOMオブジェクトの「this」をjQueryオブジェクトに変換しています。
という処理になっているはずです。 ところがっ! 保存したのはいいけれど、結局どの要素だか分からない、という事態になりました。 なんと説明していいのやら、保存したオブジェクトのプロパティを見たのですが、要素を特定する方法が無いみたいなのです。「name」とかが近いのですが、ラジオボタンだと同じ名前になってしまいます。 そこで、先に作成していた要素の一覧にプロパティを追加することにしました。
    // フォーム要素の配列を生成。
jFormElem =
  $( 'form' ).map( function() {
      var ele = $.makeArray( this.elements );
      return ele;
  }).each( function(i) {
      $(this).attr( 'focusIndex', i );
  });
とこうすることで、focusIndexというプロパティが要素の一覧に追加されます。後は番号を比べれば、どの要素なのかがすぐに分かるという算段です。

0 件のコメント: