firefoxでlabel中のテキストボックスのフォーカスが奪われる
firefoxだけで発生。
label中の要素の中にチェックボックスがあるとチェックボックスにフォーカスが移るのは仕様だが、テキストボックスなどのフォーム部品については、入力が出来なくなるのでそれでは困る。chromeやIEなどではフォーム部品は例外となっているが、firefoxではそうではないので、jqueryで対処する。
htmlの仕様的にはlabelの中に複数コントロールを置いちゃだめっぽい。
ぐぐっても解決策が出てこなかった...。解決方法は以下の通り。
おしいのは結構あった。
ポイントは2点。1つはlabel中のテキストボックスは、1瞬click focusイベントが発生したあとに、チェックボックスにフォーカスが移る。ので、click,focusイベント発生のタイミングで自分自身にfocusを実行しても、focusが上書かれる。ので、setTimeoutを0秒で遅延実行させる。しかし、setTimeoutの中にはそのままだとthisが渡せないのでbind使って渡す。引数で渡すというのもいいが、スマートではない。
return falseは、チェックボックスがon offされてしまうので、clickイベントをキャンセルする。
尚、タブキーではちゃんとフォーカスできるので、その対応はしない。
$('label input[type="text"]').click(function(){ setTimeout(function(){$(this).focus();}.bind(this),0) return false })
