-->

2011-10-08

javascriptのfocus part2



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 件のコメント: