【jQuery】$.focus()が効かないと思ったらfirefox開発者ツールが邪魔してた【Firefox】

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。

教訓:時には開発者ツールを閉じよう

そしてまた、しょーもないコトに時間を費やしてしまった…(´д`)

コメントを残す

メールアドレスが公開されることはありません。