sidebar (1)
サイドバーに移動。「フォーカス」にフォーカスする。
sidebar (2)
サイドバーに移動。「フォーカス」にフォーカスする。このブログを検索にフォーカスする。
sidebar (3)
サイドバーに移動。このブログを検索にフォーカスする。
sidebar (4)
サイドバーに移動。このブログを検索にフォーカスする。
(このブログを検索より下に'#sidebar input.gsc-input'にマッチするものは無い。)
ソース。
<input class="gsc-input" type="text" value="フォーカス" style="width: 8em; border: 1px solid gray; margin: 0; padding: 0.5em;" readonly="readonly"></input>
<a href="#sidebar" onclick="javascript:
try{(function(){
setTimeout(function(){
$('input.gsc-input').each(function(){
$(this).focus();
return false;
});
},170);
})();}catch(e){}
" target="_top">sidebar (1)</a>
サイドバーに移動。<strong>「フォーカス」</strong>にフォーカスする。
<a href="#sidebar" onclick="javascript:
try{(function(){
setTimeout(function(){
$('input.gsc-input').each(function(){
$(this).focus();
return true;
});
},170);
})();}catch(e){}
" target="_top">sidebar (2)</a>
サイドバーに移動。<strong>「フォーカス」</strong>にフォーカスする。<strong>このブログを検索</strong>にフォーカスする。
<a href="#sidebar" onclick="javascript:
try{(function(){
setTimeout(function(){
$('#sidebar input.gsc-input').each(function(){
$(this).focus();
return false;
});
},170);
})();}catch(e){}
" target="_top">sidebar (3)</a>
サイドバーに移動。<strong>このブログを検索</strong>にフォーカスする。
<a href="#sidebar" onclick="javascript:
try{(function(){
setTimeout(function(){
$('#sidebar input.gsc-input').each(function(){
$(this).focus();
return true;
});
},170);
})();}catch(e){}
" target="_top">sidebar (4)</a>
サイドバーに移動。<strong>このブログを検索</strong>にフォーカスする。
(<strong>このブログを検索</strong>より下に<strong>'#sidebar input.gsc-input'</strong>にマッチするものは無い。)jqueryのeachはfalseを返すと止まります。
'input.gsc-input'と'#sidebar input.gsc-input'でヒットする数が違います。
この例ではわざと同じクラス名をつけたタグを増やしましたが、
元々クラス名は複数指定可能なので、こういった場合タグにIDをつけると良いです。
IDがある場合eachを使う必要は無いです。($("id").focus()など)
一部の古いブラウザではjqueryが動作しなかったり、
同一ページへの移動でリロードする場合があるので使えません。
参考URL。
http://semooh.jp/jquery/api/core/each/callback/
0 件のコメント:
コメントを投稿