• このエントリーをはてなブックマークに追加
Form Focus Manager.

ここ最近,片道きゃっちぼーる が頭の中で流れ続けている issm です.CD 買ってみようかな...

さて,14日夜に行われる WCAN mini Markup vol.3 に参加させていただくわけですが,その中で Javascript なテーマも扱うということで,ホンノ小ネタとしてタイトルに示す一クラスを用意してみました.まだ改良の余地がいくらでもありますが,とりあえず公開してみます.

概要

指定したフォーム下の要素のフォーカスを,Enter で次の要素に,Shift + Enter で前の要素に,それぞれ切り替えます.また,最後の要素で Enter,もしくは任意の要素で Ctrl + Enter で submit します.それくらいです.

なお,ffm-ignore クラスを指定すれば,その要素をフォーカスの対象から外すことができます.

以下でサンプルを用意していますのでよろしければ.

FormFocusManager – 岩家らぼ

使い方

まず, FormFocusManager.js を読み込みます. (それ以前に prototype.js を読み込んでいる必要があります.)

で,

<form id="form-hoge">
...
</form>

なフォームに対してこの記述以降に

<script type="text/javascript">new FormFocusManager( 'form-hoge' );</script>

と 1行追加するだけで適用されます.

気になること

本 FormFocusManager クラスは,フォーム下の各要素 (除く ffm-ignore クラス) に keypressfocus の各イベントリスナーを仕込ませています.

ので,対象のフォーム下の要素のいずれかにあらかじめそれらが仕込まれていた場合,どんな挙動を示すのでしょうかねぇ...今後の課題としておきます.