[index] [bottom] [prev] [next]

真打ち登場!

スプレッドシートに挑戦

入力コンポーネントの真打ちといえば、やはりスプレッドシートでしょう。そこで、Webブラウザ状で、スプレッドシート形式の入力コンポーネントを実現してみましょう。

といっても、それほど大げさなことをやるわけではありません(できません)。

とりあえず実現可能なレベルとして、セルの移動をキーボードの矢印キーでできるようにします。その後表示中の内容を、エンターキー押下で、編集可能にすることとします。

このあたりのことを実現しようとすると、キーボードイベントを低レベルで処理しなければなりません。

ところで、DOMのLevel 2 Events Specificationでは、キーボードイベントに関する仕様は策定されませんでした。将来のバージョンに含まれるそうなので、それを待つしかないようです。終わり・・・・・

というのも、あまりに脳がないので、従来のHTML4.01の仕様に含まれるイベント処理で、とりあえず実現することにします。将来的にDOMがキーボードイベントを仕様に取り込んで、それが実装された時点で、プログラムは修正することとします。

実は、現時点(2004/5)に於いて、DOMのイベントを正しく実装しているWebブラウザは少数派なため、どちらにしてもそれ(DOMのイベント)だけに頼ったプログラムを作ると、使うことのできる人が、インターネット上の数パーセント(ToT;などと云うことになってしまいます。

下の表のタイトルを、マウスでクリックしてください。表のセルが選択されるはずです。キーボードの→←↑↓キーで、選択されたセルが移動します。

セルが選択されている状態で、Enterキーを押下すると、入力可能な状態になります。入力後再度Enterキーを押下すると、入力エリアが消えて、セルの選択状態に戻ります。

タイトルの後ろに、サイズを0にしたリードオンリーのテキストフィールドがあります。タイトルとテキストフィールドは、labelエレメントの子エレメントとなっているので、タイトルのテキストをマウスでクリックすると、テキストフィールドにフォーカスが移ります。

このテキストフィールドへのキーボードイベントにより、テーブル上で選択セルが移動したり、入力用のテキストフィールドの生成/消滅を制御します。

マウスでセル内のテキストフィールドをクリックすると、そのセルが入力可能になります。キーボードからの入力と、入力後のEnterキーによる制御は、キーボードにより入力フォーカスを受け取った場合と同じです。

セルとテキストフィールドの、わずかな隙間をマウスクリックすると、当然ながらイベントが伝わらないので、入力可能にはなりません。大したことじゃないと思いがちですが、本当に顧客に納品するシステムでは、何とかしないといけない部分ではあります。

キーボードによる、セルの移動
AAAA
BBBB
CC
DDDD
EEEE
FFFF
[index] [top] [prev] [next]