onclickでごにょごにょする HTML要素があって、そいつに Tabキーでフォーカスをあてたいなと思ったときに最初に思いついたのが
<a href="javascript:void(0)">ほげほげ</a>*
のように Aタグで囲う方法。遅まきながら、この時初めてステータスバーに javascript:void(0)と表示される何もしないリンクの存在意義に気付いた。こいつがあると Tabキーでフォーカスをあてられるし、Enterキーでクリックすることもできる。そしてスクリプト(onclickハンドラ)で処理できる。簡単かつ使える範囲の広い方法。javascriptを切ってるブラウザではそもそも onclickハンドラが動かないから javascriptスキーマを使うことの是非は問われないし。onclickハンドラでキーボードとマウスをまとめて処理できることや、対応するブラウザの多さなど、書けば書くほどこれしかないって思えてくる。
次に考えついたのが、9日に "tabindexはフォーカスの順番を決めるだけのものではないのだなぁ。" と書いたように、IE(>=5.0)や Firefox1.5で、tabindexを付けることでリンクやフォームの部品以外の要素をフォーカス可能にする方法。
IEの場合、
<element>.tabIndex = 0 // 0 => フォーカス可能にはするが、タブオーダーは指定しない <element>.onkeypress = function(){ if(event.keyCode == 13) this.click() } // Enter->Click
で済むが、Firefoxの場合 click()が実装されてるエレメントがフォームの部品などに限られているので
<element>.tabIndex = 0 // 同上 <element>.onkeypress = function(event){ if(event.keyCode == 13) { var event2 = document.createEvent("MouseEvents"); event2.initMouseEvent("click", true, true, event.view, event.detail, event.screenX, event.screenY, event.clientX, event.clientY, event.ctrlKey, event.altKey, event.shiftKey, event.metaKey, 0, null); this.dispatchEvent(event2); } }
と、かなり冗長。
* href="" だとそのページ自身へ移動(=リロード)してしまう。void(0)以外に href="#" を使う流派もある様子(でもイマイチ)。