入力コンポーネントの真打ちといえば、やはりスプレッドシートでしょう。そこで、Webブラウザ状で、スプレッドシート形式の入力コンポーネントを実現してみましょう。
といっても、それほど大げさなことをやるわけではありません（できません）。
とりあえず実現可能なレベルとして、セルの移動をキーボードの矢印キーでできるようにします。その後表示中の内容を、エンターキー押下で、編集可能にすることとします。
このあたりのことを実現しようとすると、キーボードイベントを低レベルで処理しなければなりません。
ところで、DOMのLevel 2 Events Specificationでは、キーボードイベントに関する仕様は策定されませんでした。将来のバージョンに含まれるそうなので、それを待つしかないようです。終わり・・・・・
というのも、あまりに脳がないので、従来のHTML4.01の仕様に含まれるイベント処理で、とりあえず実現することにします。将来的にDOMがキーボードイベントを仕様に取り込んで、それが実装された時点で、プログラムは修正することとします。
実は、現時点(2004/5)に於いて、DOMのイベントを正しく実装しているWebブラウザは少数派なため、どちらにしてもそれ（DOMのイベント）だけに頼ったプログラムを作ると、使うことのできる人が、インターネット上の数パーセント(ToT;などと云うことになってしまいます。
下の表のタイトルを、マウスでクリックしてください。表のセルが選択されるはずです。キーボードの→←↑↓キーで、選択されたセルが移動します。
セルが選択されている状態で、Enterキーを押下すると、入力可能な状態になります。入力後再度Enterキーを押下すると、入力エリアが消えて、セルの選択状態に戻ります。
タイトルの後ろに、サイズを0にしたリードオンリーのテキストフィールドがあります。タイトルとテキストフィールドは、labelエレメントの子エレメントとなっているので、タイトルのテキストをマウスでクリックすると、テキストフィールドにフォーカスが移ります。
このテキストフィールドへのキーボードイベントにより、テーブル上で選択セルが移動したり、入力用のテキストフィールドの生成／消滅を制御します。
マウスでセル内のテキストフィールドをクリックすると、そのセルが入力可能になります。キーボードからの入力と、入力後のEnterキーによる制御は、キーボードにより入力フォーカスを受け取った場合と同じです。
セルとテキストフィールドの、わずかな隙間をマウスクリックすると、当然ながらイベントが伝わらないので、入力可能にはなりません。大したことじゃないと思いがちですが、本当に顧客に納品するシステムでは、何とかしないといけない部分ではあります。