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分、しょーもない原因が判明w
もしやと思って、開発者ツールを閉じて再度実験。
→ 100%動作\(^o^)/
ブラウザのフォーカス自体が、開発者ツール側に奪われてしまっている
そのせいで、カーソルが表示されないだけだった(´д`)
確実な再現パターンはわからないが、ブラウザ描画画面をクリックしてからリロードしても、
開発者ツールがフォーカスを奪っていることもあり、.focus()の動作チェックするときは、覚えておきましょう…多分忘れるけどw。