こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

チェックされたラジオボタンにフォーカスを移動したい

<LABEL><INPUT type="radio" id="a" value="0" checked>すべて</LABEL><BR>
<LABEL><INPUT type="radio" id="a" value="1">一部</LABEL><BR>
<LABEL><INPUT type="radio" id="a" value="2">なし</LABEL><BR>

<LABEL><INPUT type="radio" id="b" value="0" checked>すべて</LABEL><BR>
<LABEL><INPUT type="radio" id="b" value="1">一部</LABEL><BR>
<LABEL><INPUT type="radio" id="b" value="2">なし</LABEL><BR>

<LABEL><INPUT type="radio" id="c" value="0" checked>すべて</LABEL><BR>
<LABEL><INPUT type="radio" id="c" value="1">一部</LABEL><BR>
<LABEL><INPUT type="radio" id="c" value="2">なし</LABEL><BR>
・・・
のようにラジオボタンがグループ別に並んでいる場合に
Enterキーを押したときにフォーカスが次のラジオボタングループの
チェックが入ったラジオボタンにフォーカスを移動したいのですが、
何かいい方法はないでしょうか?

投稿日時 - 2004-07-14 17:18:33

QNo.926239

困ってます

質問者が選んだベストアンサー

pentaro_2000さんの質問を見て、初めて知りましたけど、HTMLの機能では、ENTERキーを押下されても、フォーカスが次の場所へ移動することは無いんですね

少し調べて見ましたが、HTMLだけではENTERキーによるフォーカス移動は出来ないみたいなので、JavaScriptにてラジオボタンのみフォーカスの移動が出来るモジュールを組んで見ました。
一つの例として、以下のソースを書いておきますが、「良いソースコード」とは、決して言えません。
サッと作った物なので、IEのみの対応となっています^^;

説明:
focusChange関数の引数で、現在フォーカスを保持しているオブジェクトを渡し、関数内処理で、そのオブジェクト以降に存在するオブジェクトの中でチェックが付いているオブジェクトを検索し、そのオブジェクトにフォーカスが移る作りになっています。

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
// 注) IEのみ対応
// 指定したオブジェクトのIDを取得する
function getElementID( obj ) {
var k;
for( k = 0; k < document.all.length; k++ ) {
// オブジェクト比較し、検索を掛ける
if( document.all(k) == obj ) return k;
}
return -1;
}
function focusChange( obj ) {
var id;
var k;
// keyCode:13=ENTERキー押下時
if( event.keyCode == 13 ) {
id = getElementID(obj);
for( k = id + 1; k < document.all.length; k++ ) {
// ID番目以降でチェックが付いているオブジェクトを検索
if( document.all(k).checked ) {
document.all(k).focus();
break;
}
}
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<LABEL FOR="a"><INPUT type="radio" id="a" name="a" value="0" onKeyPress="focusChange(this);" checked>すべて</LABEL><BR>
<LABEL FOR="b"><INPUT type="radio" id="b" name="a" value="1" onKeyPress="focusChange(this);">一部</LABEL><BR>
<LABEL FOR="c"><INPUT type="radio" id="c" name="a" value="2" onKeyPress="focusChange(this);">なし</LABEL><BR>

<LABEL FOR="d"><INPUT type="radio" id="d" name="b" value="0" onKeyPress="focusChange(this);" checked>すべて</LABEL><BR>
<LABEL FOR="e"><INPUT type="radio" id="e" name="b" value="1" onKeyPress="focusChange(this);">一部</LABEL><BR>
<LABEL FOR="f"><INPUT type="radio" id="f" name="b" value="2" onKeyPress="focusChange(this);">なし</LABEL><BR>
</BODY>
</HTML>

投稿日時 - 2004-07-15 00:50:28

お礼

うまくできました。
オブジェクトも比較できるんですね。
勉強になりました。ありがとうございました。

投稿日時 - 2004-07-15 11:15:00

ANo.1

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問