フレーム内のINPUTにfocusできません

[上に] [前に] [次に]
佐ト [E-Mail] 2000/05/24(水) 17:31:17
初めて質問させていただきます。

フォームのINPUTでonBlurのイベントが発生したときに
その値をチェックしてNGだった場合は元のINPUTにfocusを
戻すスクリプトを作成しました。
テスト用にノンフレームでやっていたときはうまく動いていたのですが、
本番用のフレーム構成にしたとたん動かなくなりました。
また、動かないのはNN4.6でマウスで他の入力域を
クリックした場合で、「TAB」キーで入力域を移動した場合は正常に
動作しますし、IE5ではフレーム構成でも期待通りの動作をします。
内容は以下の通りです。

フレーム1(NAME:left)
(内容はダミーの内容で構いません)

フレーム2(NAME:right)
<HEAD>
<TITLE>right</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function check(frm,fcs,data){
        if(data!="OK"){
                alert("Please Set [OK]");
                parent.right.document.form1.in2.focus();
        }
}
// -->
</SCRIPT>
</HEAD>

<BODY>
<FORM NAME=form1 METHOD=GET action=dummy.cgi>
INPUT1<INPUT TYPE=text NAME=in1 SIZE=5 MAXLENGTH=5>
INPUT2<INPUT TYPE=text NAME=in2 SIZE=5 MAXLENGTH=5 VALUE="OK" onBlur="check(self, this, this.value)">
INPUT3<INPUT TYPE=text NAME=in3 SIZE=5 MAXLENGTH=5>
<INPUT TYPE=submit VALUE="dummy">     
<INPUT TYPE=reset VALUE="reset">
</FORM>
</BODY>

NN4.6の場合はこのスクリプトのINPUT2の内容が「OK」でないときに
onBlurが発生すると強制終了しか終わらせる方法がありません。

フレーム構成でNN4.6の場合はINPUT2の入力域をクリックするだけでも
onBlurのイベントが発生するようなのですがそれが原因でしょうか?

すいません、なんだか長くなってしまいました。 m(_ _)m
宜しくお願いいたします。

謎の人 2000/05/25(木) 09:56:36
Netscape(R) Communicator 4.5 では再現せず。
ただし、
>フレーム構成でNN4.6の場合はINPUT2の入力域をクリックするだけでも
は同じでした。

もちろん、IE5では問題なし。
IE5では「INPUT2の入力域をクリック〜」でイベントは発生する事もなかったです。

NN4.6の固有の問題か?

バギンズ 2000/05/25(木) 15:18:47
私はNC4.6で再現しました。(イベントが止まらない〜)

何故、フレームにするとおかしくなるのかはわかりませんが、
onBlurは他にもいろいろ問題がありそうですね...

参考
http://www.shiojiri.ne.jp/~openspc/JavaScript/event.html

佐ト [E-Mail] 2000/05/25(木) 20:48:11
謎の人さん、バギンズさん ありがとうございます。

そうですか、4.5で動いたという事は4.6以降のバグ(仕様の違い?)
ですかね?
試しに4.7でもやってみたところ同じ現象でだめでした。

JavaScript初心者ゆえ自分のスクリプトが悪いと思い込んで
いましたが、バグかもしれないとなるとアプローチの仕方が
違ってきます。
INPUT2とFRAME2(BODY)にonBlurのイベントハンドラをつけて
NN4.6とIE5でイベントが発生する様子を比較してみました。
当幅フォントでご覧ください。
(Fr:FRAME2のBlur  In:INPUT2のBlur  --:無し)
                  NN4.6      IE5
FRAME1 -> FRAME2  Fr         --
FRAME2 -> FRAME1  Fr         Fr
FRAME2 -> FRAME2  Fr,Fr      --
FRAME1 -> INPUT1  Fr         Fr
INPUT1 -> FRAME1  --         --
FRAME2 -> INPUT1  Fr,Fr      Fr
INPUT1 -> INPUT2  Fr         --
INPUT2 -> INPUT3  In,Fr,In   In

こうして比べてみるとIE5は実にまっとうなのに対し、
NN4.6のなんと挙動不審な事か。更に妙な事に
FRAME2 -> FRAME2で2回発生するイベントは
クリックをONで1回OFFで1回発生します。

入力が20個所ほどあり、内容チェックの仕方が4パターン
ほどあるので、Blurでこまめに入力値をチェックしたかった
のですが、INPUT2 -> INPUT3でIn,Fr,In と2回イベントが
発生するようだとあきらめるしかありませんね。
onChangeでお茶を濁すか、onSubmitでまとめてチェック
するように変更します・・・が、
この不審なイベント発生の回避方法をご存知の方の
情報をお待ちしております。

#こういう場合は「解決時のチェック」をつけた方がいいんでしょうか?

ken 2000/05/28(日) 02:32:22
私がいつもしているチェックのやり方は

まず空だったら抜けて
何か入力されていたらチェック
NGだったら
alert("ミス");
parent.right.document.form1.in2.value = ""
parent.right.document.form1.in2.focus();
としています。

そして、Submit時に必須項目が入力されているか
チェックするという仕方です
フレームで切っていないのでこのやり方で正しいか
わかりませんが
ご参考になれば幸いです

佐ト [E-Mail] 2000/05/30(火) 13:08:05
kenさん ありがとうございます。

なるほど、確かにこうすれば2回目のイベントが発生した時に
更にalertが実行される事はありませんね。
但し、日付データ程度(8文字)ならクリアしてしまっても
OKですが、今回のチェック項目には使用してはいけない文字の
チェックというのもあって、その入力域は80カラムあります。
長い文字を入力したのに禁止文字が含まれていた為にすべて
クリアされてしまったら、入力していた人はくじけてしまうと
思います。
ということで、このチェック方法は短い入力域用に使わせて
いただきます。

ken 2000/06/02(金) 01:34:36
ちょっとは参考になったみたいですね?
よかったです。
それでは、次のような事はどうでしょうか?
<input type="hidden" name="dami">
をダミーでつくり
parent.right.document.form1.in2.value = ""
をなくし
focusを
先ほど作成したダミーに移すようにすれば良いと思います
私のNN4.5ではOKでしたよ。

しかし、Submit時にきちんと入力チェックを
しないと行けないといけませんが・・・・

[上に] [前に] [次に]