UI改善のためによくやるやーつ のテストをしてたら
ページを開くだけですぐ入力可能になる仕組みありますよね。その動作チェックでちょっと無駄な時間を過ごしたので、備忘録。
ページを開いたとき、一番最初に入力するところにカーソルをfocus!
たとえばログインフォームを開いた段階で、IDのところにカーソルが合っているようにすると親切ですね。
それを実現する方法
CakePHPの場合 ― レイアウトファイルに仕掛けておくと
$(function(){
//フォーカスさせたいフォームがあれば
$(".defaultfocus:eq(0)").focus();
});
を仕込んでおけば、inputに
echo $this->Form->input('Hoge' , array( 'class' => 'defalutfocus' ));
とでも書いておけば、ページを開いた後、 class=”defalutfocus” の1番最初のものにカーソルが移動した状態になってくれます。
‥‥なってくれるはず、だったのだが
いつものように、開発者ツールを開きつつ、 ajax のチェックしながら、
ついでに.focus()を入れてUIを改善していたところ、時々focusが効かないことがあるコトに気づきました。
DOM描画が終わる前に発動している…？
Ajaxでフォームを非同期で読み込むタイプの構成だと、
描画前にfocusが発動してしまい、動作が不確実になることがありましたので、
settimeoutで0.5秒待たせてみる
$(function(){
setTimeout( function(){
//最初からフォーカス設定があれば合わせておく
$(".defaultfocus:eq(0)").focus();
} , 500)
});
などを試してみます。‥‥うーん、まだ動かない（ことがある）。10秒待たせても結果は同じ。
「動かないことがある」というのが非常に困る(^_^;
なんでだろうなんでだろう といろいろググったりしても問題解決には至らず…。
実験を繰り返すこと30分、しょーもない原因が判明ｗ
もしやと思って、開発者ツールを閉じて再度実験。
→ 100％動作＼(^o^)／
ブラウザのフォーカス自体が、開発者ツール側に奪われてしまっている
そのせいで、カーソルが表示されないだけだった(´д｀)
確実な再現パターンはわからないが、ブラウザ描画画面をクリックしてからリロードしても、
開発者ツールがフォーカスを奪っていることもあり、.focus()の動作チェックするときは、覚えておきましょう…多分忘れるけどｗ。