JavaScript Tips 2

u2viewをそれなりにキー操作できるようにしてみた。

気づいたことをメモ。

■ Opera9におけるoffsetTop

スクロールバーつきだと、「画面上で見えている上端」からの距離になってしまう。

IE6/Firefox2では、スクロールバーの有無に関係なく、本来の上端からの距離になっている。

バグだろうか。offsetLeftでも同じことが起こってそうな予感。

var elem = document.getElementById("foo");
if (window.opera) oTop = elem.offsetTop + elem.scrollTop;    // Opera
else              oTop = elem.offsetTop;                     // その他

■ tabindex属性について

1,2,3,...,0（指定なし）の順で移動する。重複している場合は表示順でフォーカスが当たる。

0を指定した場合は指定なしと同じレベルとなり、フォーカスが当たらない要素の場合はフォーカスが当たるようになる。

負数を指定した場合、IE6/Firefox2ではTABで移動しなくなる。Opera9では0を指定した場合と同じ扱いになり、フォーカスが当たる。

Opera9では標準でa要素にフォーカスが当たらないので、a要素にフォーカスを当てるにはひとつひとつにtabindex="0"などを指定する必要がある。

■ キーイベントについて

□ 発生のタイミング

keypressは押している間ずっとイベントが発生する。

keyupはキーを離したときに1回イベントが発生する。

keydownはIE6/Firefox2では押している間ずっと、Opera9では押したときに1回イベントが発生する。

発生順はkeydown、keypress、keyupの順。

□ キーコードの取得

	IE6	Firefox2	Opera9
keydown keyup	keyCode	keyCode/which	keyCode/which
keypress	keyCode	（注）	keyCode/which

（注）特殊キーはkeyCode、文字キーはcharCode。whichなら両方取得できる。

参照：DOM:event.which - MDC

アルファベットキーの場合、格納される値には keypress = keydown/keyup + 32 の関係がある。

これはkeypressのときは小文字、keydown/keyupのときは大文字のASCIIコードとなるため。

大文字小文字の入力に関係なく、上記の値となる。

まとめ。

c = (typeof(event.which) != "undefined") ? event.which : event.keyCode;

■ 雑感

まるで砂利道を走っている気分。いつになったら統一されるんだろ。

普段Opera9を使わないので、Opera9対応がしんどい。

しかも、何だか動作が特殊。a要素をTABで移動できないのって辛くないか？オプションで変更できるんだろうか……

いい加減Firefox2に移行しようかな。うちの環境だとちょっと重いので敬遠気味だったりするのですけど。

というか、X Libraryとかprototype.jsとかの利用を考えたほうがいいのかもしれないな。

クラスとか全く考えずに作ってきたせいで、見通しもよくない。さすが素人。

これは、そのうち改善しよう。

（追記）

マウスなしで Opera を利用する | Opera Software

Q と A のキーでドキュメント内の前もしくは次のリンクへとジャンプします（Ctrl+Down と Ctrl+Up でも同様です）。

なるほど。独自のアクションがあるのか……

まあ、一応Opera9でもTABで移動できるようにしておこう。