【Tabキー】特定の範囲内だけでフォーカスを循環

解決済

質問者：atoris
質問日時：2009/10/06 10:46
回答数：1件

お世話になります。
javascript初心者のため、的外れな質問をしていましたらすみません。

HTMLサイトのフォーカスを、TabキーまたはShift＋Tab押下で特定の範囲内で循環させたいと考えております。
イメージ的には、サイトのメニューにあたる部分（リンク）をぐるぐるループしてくれれば・・・と思うのですが。

Tabindex指定ですと、意図した順番には移動してくれますが、最後のTabが押されても最初に戻ることはできませんし・・・
そう思ってonkeydownで制御しようと思ったのですが、Shift＋Tabの動作をどう実現していいのか分かりませんでした。

言葉足らずで申し訳ありませんが、ご回答宜しくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： babu_baboo
回答日時：2009/10/06 15:40

れすがつかないね～。

これでよいのかまったくわかりません。
（めもりーりーくとか、そのたもろもろ・・・）
できるなら、たのひとのあどばいすがほしいです。
ぜんかくくうはくは、はんかくにしてね

２だんめのあんかーにふぉーかすをあてるには、
まうすでどらっぐしてほかのばしょではなす？。
はんたいまわりは、てぬきしました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>test</title>
<form action="#">
<p id="pp">
<a href="#">abc</a>
<a href="#">abc</a>
<a href="#">abc</a>
</p>
<p id="qq">
<a href="#">abc</a>
<a href="#">abc</a>
<a href="#">abc</a>
</p>
<p id="rr">
<a href="#">abc</a>
<a href="#">abc</a>
<a href="#">abc</a>
</p>
<p>a</p>
</form>
<script type="text/javascript">
//@cc_on

var Kurukuru = (function ( createListener, get, next ) {
　return function ( id ) {
　　var listener = createListener( id, get, next );
　
　　document.getElementById( id )./*@if( @_jscript ) attachEvent('on' + @else@*/ addEventListener(/*@end@*/
　　　'keydown', listener, true);
　};
})(
　function ( tid, get, next ) {
　　return function (evt) {
　　　var e　= evt./*@if( @_jscript ) srcElement @else@*/ target /*@end@*/;
　　　var keyCode = evt./*@if( @_jscript ) keyCode @else@*/ which /*@end@*/;
　　　var shift　 = evt.shiftKey;
　　　var p, c;
　　　
　　　if( 'A' !== e.nodeName ) return;
　　　
　　　if( !shift && keyCode == 9 ) {
　　　　if( p = get( next( e ), 'id', tid ) ) return;
　　　　evt./*@if( @_jscript ) returnValue = false @else@*/ preventDefault() /*@end@*/;
　　　　(p = next( e.parentNode )) && p.focus();
　　　}
　　};
　},

　function (node, type, val) {
　　return node ? (val == node[type]) ? node: arguments.callee(node.parentNode, type, val): null;
　},
　
　function ( n ) {
　　var e;

　　while (n) {
　　　e = n.firstChild || n.nextSibling
　　　if (! e) {
　　　　do {
　　　　　if ((n = n.parentNode) && n.nodeName == 'BODY') return null;
　　　　} while (! (e = n.nextSibling))
　　　}
　　　n = e;
　　　if( 1 === n.nodeType && 'A' == n.nodeName ) return n;
　　}
　　return null;
　}

);

Kurukuru('pp');
Kurukuru('qq');
Kurukuru('rr');

</script>