element.focus()のタイミング

小一時間はまったので記録

フォーム入力を受け付ける画面を、エンドユーザーに作成させる時の要望で
あらかじめフォーカスさせたい場合がある。

こんな時通常は、次のようにすれば良いとサイト紹介されている。

document.form1.field1.focus();
とか
document.forms[0].input[0].focus()
とか

しかし、今回はちょっと手ごわい、なぜならform1もfield1も不明。
しかもDOMはAjaxリクエストの結果で取得したもの
formの連番も不明
ただ単にclassにfocusが入っているものにフォーカスを行わなくてはいけない。

それでも簡単
window.addEvent('domready',function(){
　$$('#formID input.focus').each(function(el){
　　el.focus();
　});
});

で出来るはず！
ところが、まったく動作しない。

もちろん、el.focus();をボタンに割り当ててクリックするときちんと動作する
？？？なぜ？？？
実は上記のコード自体に問題はそれほど無かった。

答えは実行するタイミング
domreadyとなっているけど、フレームワークの中でほかにもdomreadyで
イベントを割り当てて、しかも上記のコードの後から実行していた。

その中でDOMの要素をつけたり足したりしてると、フォーカスの設定が無効になってしまうらしい。

focusを利用するときは、「DOMの操作が全て完了してからのタイミング」にしなくてはいけないみたいですね。

解決！