フレームでフォーカスを制御するには？

[上に] [前に] [次に]
たろじい 1999/08/04(水) 15:32:37
フレーム（上下２分割）を使い、

上フレームに番号を入力するテキストボックスを２つ、
下フレームに「実行」、「クリア」、「終了」ボタン

がある画面を作成しました。

「実行」ボタン押下時にJavaScriptで、
テキストボックス内に数値以外の値が入力されていないかを
チェックし、エラーの場合、メッセージボックス（　alert()　）
を表示し、focus()、select()でエラーの起きたテキストボックスに
フォーカスを移動し選択状態にする。

という処理をしているのですが、
（１）１つめのテキストボックスに数値以外の値を入力。
（２）「実行」ボタン押下
（３）エラーのため、メッセージボックスが表示され、「OK」ボタンを押下。
（４）フォーカスが１つめのテキストボックスに移動。

このあとに、「Tab」キーを押し、２つめのテキストボックスに、
フォーカスを移動させようとすると、フォーカスが「クリア」ボタン
へ移ってしまいます。

２つめのテキストボックスにフォーカスが移動するように制御できないのでしょうか？
ブラウザは、Netscape Communicator 4.06を使用しています。

よろしくお願い致します。
Tmb 1999/08/04(水) 16:24:55
外してるかもしれませんが。
（４）の前に「上のフレーム」にフォーカスを与えてみるとどうでしょう？
これで無理であればソースを見せていただいた方が・・・。
たろじい 1999/08/04(水) 17:34:58
>（４）の前に「上のフレーム」にフォーカスを与えてみるとどうでしょう？
↑
この方法で、
２つめのテキストボックスに移動させることは出来ましたが、
そのまま「Tab」キーを押していくと、「実行」ボタンに行かず、
「クリア」ボタンへ行ってしまいます。

[親フレーム]
<HTML>
<HEAD>
<TITLE>登録照会番号入力画面</TITLE>
</HEAD>
<FRAMESET ROWS="*,59">

    <FRAME NAME="main"
           SRC="main.htm"
           TARGET="main"
           SCROLLING="auto">

    <FRAME NAME="footer"
           SRC="button.htm"
           TARGET="main"
           SCROLLING="no">

    <NOFRAMES>
        <BODY>
            <P>このページにはフレームが使用されていますが、
               お使いのブラウザではサポートされていません。</P>
        </BODY>
    </NOFRAMES>
</FRAMESET>
</HTML>

[上フレーム]
<HTML>
<HEAD>
<TITLE>登録照会 番号入力画面</TITLE>

<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
/******************************* JavaScript ******************************/

function BanHan() {

    var suu_chk1;  /* 数値以外チェック */
    var suu_chk2;  /* 数値以外チェック */


/**************** 数字以外の文字チェック ****************/

    /* 登録番号 */
    suu_chk1 = isNaN(document.syoukai.touban.value);
    if(suu_chk1 == true){
        alert("数値以外の値が入力されました。");
        window.focus();
        document.syoukai.elements[0].focus();
        document.syoukai.elements[0].select();
        return false;
    }



    /* 分割番号 */
    suu_chk2 = isNaN(document.syoukai.bunban.value);
    if(suu_chk2 == true){
        alert("数値以外の値が入力されました。");
        document.syoukai.elements[1].focus();
        document.syoukai.elements[1].select();
        return false;
    }


    window.open("・・・・","_top");

}

/************************* JavaScript ここまで ***************************/
//-->
</SCRIPT>
<BASE TARGET="main">
</HEAD>


<FORM NAME="syoukai">
    <P>　　登録番号</P>
    <P>　　　　<INPUT TYPE="text"
                      NAME="touban"
                      SIZE= "7"
                      MAXLENGTH="7"
        >　−　<INPUT TYPE="text"
                      NAME="bunban"
                      SIZE="31"
                      MAXLENGTH="31"></P>
</FORM>
</BODY>
</HTML>

[下フレーム]
<HTML>
<HEAD>
<TITLE>登録照会 ボタン画面</TITLE>
</HEAD>

<BODY>
<FORM NAME="form1 align=" center">
    <DIV align="center"><CENTER><P>


    <INPUT TYPE    = "button"
           VALUE   = " 実  行 "
           ONCLICK = "parent.frames[0].BanHan()"
           >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    <INPUT TYPE    = "reset"
           VALUE   = " クリア "
           ONCLICK = "parent.frames[0].document.syoukai.reset()"
           >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    <INPUT TYPE    = "button"
           VALUE   = " 終  了 "
           ONCLICK = "top.close();">

    </P></CENTER></DIV>
</FORM>
</BODY>
</HTML>

よろしくお願い致します。
Tmb 1999/08/04(水) 18:13:53
手元の環境がNN3なので確認できない（そもそもbuttonやresetにフォーカスが
つかない）のですが・・・。

通常の状態でTabキーによるフォーカス移動の順序はどうなっていますか？
２つめのテキストボックスの次は「下のフレーム全体」ではないですか？

もしそうだとしたら，おそらくそれが正常なTabによるフォーカス移動では
ないかと思います。それでもどうしても２つめのテキストボックス→［実行］
にしたいなら，下のフレームのBodyのonFocusで［実行」にフォーカスを
与える手もあると思いますが。

もし２つ目のテキストボックスの次が，間違いなく［リセット］だとしたら，
その後の順序はどうなってますか？　もしその順序が［リセット］→［実行］
→［終了］だとしたら，考えにくいことですが，INPUTのtypeが影響してる
のかもしれません。見たところ［リセット］のtypeはbuttonでも構わない
と思いますので，そうしてみたらいかがでしょう？
またtypeがresetであると，もしかしたら「下のフレーム全体」にフォ
ーカスがあるときにenterキーなどを押すと（submitがないことに関係して）
それが実行されてしまうということもあるのかもしれませんから，typeを
変えてみるというのはもしかしたら解決につながるかもしれないと。

＃いや，推測だけでここまで言うのは非常に気が引けるのですが。
たろじい 1999/08/04(水) 19:03:34
いろいろな方法をあげていただいて
本当にありがとうございます。

>通常の状態でTabキーによるフォーカス移動の順序はどうなっていますか？
>２つめのテキストボックスの次は「下のフレーム全体」ではないですか？

正常の場合、２つめのテキストボックスの次は、
フォーカスは「下のフレーム全体」になり、同時に、
「実行」ボタンに移ります。


>それでもどうしても２つめのテキストボックス→［実行］
>にしたいなら，下のフレームのBodyのonFocusで［実行」にフォーカスを与える手もあると思いますが。

試してみたのですが、この場合、「実行」ボタンに
フォーカスが移動するのですが、エラーが発生した
テキストボックスのフォーカスが消えてしまいます。


>typeを変えてみるというのはもしかしたら解決につながるかもしれないと。

これも、試してみましたがダメでした。

element（テキストボックス、ボタン etc）に対して
上フレーム、下フレーム別々でフォーカスの位置を
記憶しているようで、「フレーム全体」にフォーカスが
移ったときに、前回までのフォーカスの位置から始まって
しまうようです。

そのため、
（１）「実行」押下　→　「下フレーム全体」にフォーカス移動
　　　　　　　　　　　　現在の場所（「実行」）を記憶。

（２）エラー　→　「上フレーム全体」にフォーカス移動
　　　　　　　　　テキストボックスにフォーカス移動
　　　　　　　　　現在の場所（テキストボックス）を記憶。

（３）「Tab」キー　→　「下フレーム全体」へフォーカス移動
　　　　　　　　　　　下フレームでの前回の位置の次
　　　　　　　　　　　（「クリア」）へフォーカス移動

というようになっているようです。(説明がヘタですいません)
たろじい 1999/08/04(水) 19:16:58
上の文章の補足のようになります。
（なっていないかもしれませんが・・・）

「Tab」キーを押下した場合、「終了」ボタンの次は、
アドレス（URL）の部分に行くのですが、
「Tab」キーではなく
JavaScriptかなにかで、意図的にこの部分に、フォーカスを
移動することはできるのでしょうか？
Tmb 1999/08/05(木) 10:45:04
なるほど。上下のフレームが別々に部品へのフォーカスを記憶しているのですか。
勉強になりました。

（１）実行を押下〜（２）エラーまでの間に［実行］に対してblur()でフォーカスを
外してやるとどうでしょう？　もしかしたら「下フレームにフォーカスがあるが，
どの部品にもフォーカスがない」状態になり，そこでTabを押すことで［実行］に
フォーカス移動するかもしれないなぁ，などと考えてしまったもので。

>アドレスの部分
これについても判らないのですが，N4からはwindow.locationbarなるオブジェクトが
あるようです。もしかしたらこれにfocus()が効くかも。
＃NN3では未対応のオブジェクトなので，これまた試せませんでしたが。
たろじい 1999/08/05(木) 11:37:48
[[解決]]
>（１）実行を押下〜（２）エラーまでの間に［実行］に対してblur()でフォーカスを外してやるとどうでしょう？　

>これについても判らないのですが，N4からはwindow.locationbarなるオブジェクトがあるようです。もしかしたらこれにfocus()が効くかも。


教えていただいた上記方法を試してみましたが、うまく動作しません
でした。
ブラウザの仕様での動作ということで上手く制御できなそうですね。

Tmbさん、本当にいろいろな意見（方法）を考えてくださってありがとうございました。とても勉強になりました。
[上に] [前に] [次に]