onFocusOutが複数回呼ばれる!

このQ&Aのポイント
  • onFocusOutが複数回呼ばれる問題に対する回避策
  • 解決策として、document.form1.txt1.focus();を削除することが挙げられる
  • ただし、focus()は必要な処理であるため、他の回避策も検討する必要がある
回答を見る
  • ベストアンサー

onFocusOutが複数回呼ばれる!

下記のようなonFocusOutを設定しておくと。。 通常はフォーカスが移動した1度しかJavaScript関数の focusOutFun()が動かないのですが、下記の場合には なんと3回もこの関数が動いてしまいます!!! ■手順  1)TEXTタグにフォーカス移動  2)SELECTタグにフォーカス移動  3)focusOutFun()が3回も動く ←★??? もーなにがなんだか分からずに大変に困っています。 何かよい回避策などアドバイスが御座いましたら。 是非、教えて下さい。どうぞ宜しくお願いします。 ※document.form1.txt1.focus();を削除すると一度しか  関数は動作しないのですが、focus()は必要な処理です。 ---------------------------------------------- <input type='text' name="txt1" onFocusOut='focusOutFun()'> <select name="sel"><option>test1</option></select> <script language='javascript'> function focusOutFun() { alert("test"); document.form1.txt1.focus(); } </script> ----------------------------------------------

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

  • ベストアンサー
  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.1

確かに、onFocusOutを使うとselectタグをクリックした時3回呼ばれるようです。 onBlurでやってみたところ1回になりましたが onBlurではだめですか?

nsakurako
質問者

お礼

早急なご回答をありがとうございました。 onBlurで解決です!!!!!! ありがとうございました!!!!!!!!!!

関連するQ&A

  • FireFoxだけエラーが出てしまう

    フォームのセレクトに追加するために以下のコードを作りました。 ===外部ファイル[script.js]=== function addList(txt, val) {  document.getElementById("sel").length = document.getElementById("sel").length + 1;  document.getElementById("sel").options[document.getElementById("sel").length - 1].text = txt;  document.getElementById("sel").options[document.getElementById("sel").length - 1].value = val; } ===HTMLファイル============== <FORM action="test.cgi" method="GET">  <SELECT name="sel">   <OPTION value="tokyo" selected>東京駅  </SELECT>  <INPUT type=submit> </FORM> <SCRIPT TYPE="text/javascript" SRC="script.js"></SCRIPT> <SCRIPT type="text/javascript"><!--  addList("新宿駅", "shinjuku");  addList("渋谷駅", "shibuya");  addList("池袋駅", "ikebukuro"); // --></SCRIPT> しかし、IE6とOpera9.2では動くのですが、FireFox2.0ではエラーが出てしまいます。エラーは以下のようでプロパティがないと返されます。     document.getElementById("sel") has no properties これはどのように直せばよいのでしょうか? お手数ですがご教授お願いいたします(環境はWindowsXPです)。

  • セレクトボックスの内容に応じウインドウを書き換え、さらにセレクトボックスを設置したい

    web上のjavascript入門ページなどを参照しながら学習中ですが詰まってしまいました。よろしくお願いします。 1. topページにセレクトボックスを設置。 2. セレクトされた内容に応じて、現在のウインドウを書き換えた後topページと同じセレクトボックスを設置。 3. 2を繰り返す。 このような動作をさせたいのですが、現在のウインドウを書き換えることは出来るのですがセレクトボックスを設置しようとするとエラーになります。 script_test01.htmlの内容 -------------------------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> </head> <body> <script type='text/javascript' src='script_test01.js'> </script> <br> <form name='form_0'> <select onchange='rewrite()' name='sel_0'> <option>A or B</option> <option>A</option> <option>B</option> </select> </body> </html> -------------------------------------------------- script_test01.jsの内容 -------------------------------------------------- function rewrite() { var sel_in =document.form_0.sel_0.options.selectedIndex; var sel_name = document.form_0.sel_0.options[sel_in].text; document.write('<html>\n'); document.write('<head>\n'); document.write('<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">\n'); document.write("<script type='text/javascript' src='script_test01.js'>\n"); document.write("</script>\n"); document.write('</head>\n'); document.write('<body>\n'); document.write(sel_in,' : ',sel_name,'<br>\n'); /* ↓この部分がうまくいかない document.write('<br>\n'); document.write('<form name='form_0'>\n'); document.write('<select onchange='rewrite()' name='sel_0'>\n'); document.write('<option>A or B</option>\n'); document.write('<option>A</option>\n'); document.write('<option>B</option>\n'); document.write('</select>\n'); /* ↑この部分がうまくいかない document.write('</body>\n'); document.write('</html>\n'); } -------------------------------------------------- script_test01.jsのコメントアウトをはずすとエラーになります。 script_test01.js内でさらに自分自身を記述している部分辺りなど、なにかおかしなことをやっていのではという自覚はありますが、よくわかりません。 あわせて質問ですが、.htmlと.jsはEUCで作成しcharsetもEUC-JPを指定しています。 topページをブラウザのエンコードで確認すると当然「日本語[EUC]」となっていますが、セレクトボックス選択後書き換えられたページを確認すると、「Unicode」なっていますがなぜでしょうか?「日本語[EUC]」に出来ないでしょうか?

  • 入力フォームでdisabledによる入力制限

    プルダウンをdisabledで制御しようと思っています。 yearを選択するまでmonthを無効にしたいのですが、うまくいきませんでした。 下記の簡略化したソースでも動作しませんでした。 テストでwindow.openを入れると動作するので、document...の文かとは思うのですが。 どなたかお気づきでしたら、お教え下さい。 よろしくお願い致します。 <html> <head> <title>inputtest</title> <SCRIPT LANGUAGE="JavaScript"> function menu_ctrl(){ var sel_num = document.sel_inp.year.selectedIndex; if(sel_num == 0){ document.sel_inp.month.disabled = false; // window.open("http://www.google.co.jp/"); } } </SCRIPT> </head> <body onload="menu_ctrl()"> <form name="sel_inp"> <select name="year" onchange="menu_ctrl()"> <option value="00" style="color:#AAAAAA">null</option> <option value="01">2007</option> <option value="02">2008</option> <option value="03">2009</option> </select> <select name="month"> <option value="00" style="color:#AAAAAA">null</option> <option value="01">1</option> <option value="02">2</option> <option value="03">3</option> </select> </form> </body> </html>

  • 同一ページに複数のプルダウンメニュー

    同一ページに複数のプルダウンメニューをつけたいのですが、 どうすればよいのでしょうか。 下記のように1つはつけることができたのですが、 2つめから、どこをどう変えて追加すればよいのかわかりません。 <script language="javascript"> <!-- function A_Li(){ Sel=document.Link1.OP.selectedIndex; Ms=document.Link1.OP.options[Sel].value; parent.main.location.href=Ms;} // --> </script> <FORM name="Link1"> <SELECT name="OP" onChange="A_Li()" size="1"> <OPTION Value="main.htm" SELECTED>ページを選んでください <option value="main.htm">ぺージ1</option> <OPTION Value="abc.htm">ページ2 <OPTION Value="def.htm">ページ3 </SELECT> よろしくお願いします。

  • フォーカスの移動

    どうしてもわからないので、教えて下さい。 下の option ボタンのいずれかを選択した際に、 自動的にテキストボックスにフォーカスが移るような スクリプトを書きたいのですが、 スクリプトの内容と、htmlにへの組み込み方を どのように実装してよいかわかりません。 ------------------------------------- <html> <title></title> <head> <script language="JavaScript"> //フォカース移動 function moveFocus() { //???? } </script> </head> <body> <form name="myForm"> <select name="mySelect"> <option name="op1">test1</option> <option name="op2">test2</option> </select> <input type="text" name="myText"></input> </form> </body> </html>

  • PHPでjavascriptを表示する方法

    すみません。javascriptの事はほとんど分からないのですが、 phpを使ってjavascriptを表示したいのですが基本的な部分で分かりません。 例えば <?php echo"<script>document.write(\"PHP!\")</script>;" ?> は簡単にできますが、タグに入っているjavascriptはどうやってphpで表示させるのでしょうか? <form name="aaa" method="post" action="bbb.php"> <select name="ccc" onChange="document.forms['aaa'].submit()" > <option value="111">111</option> <option value="222">222</option> </select> </form> 上記のスクリプトを単純にphpで表示したいのですが、どうやってもphpで囲むとonChangeが動かず 動的にはなりません。 何時間もぐぐったりしてますが解決しません。タグの中のjavascriptは直接phpでは動かせないのでしょうか?

    • ベストアンサー
    • PHP
  • 複数のプルダウンメニューの作り方。

    ・Aリスト、Bリスト…とプルダウンメニューを複数含んだフォームを一つのhtmlに作りたいのですが、上手くいきません。 一つのフォームに一つのプルダウンメニューは上手くいくのですが、Javascriptを二つ並べると動かなくなります。 とりあえず関数名を重複しない様にしたらいいという事だけはネットで調べてわかりました。 今は、下記の状態になっています。 <script language="JavaScript"> <!-- function MENU(){ mySelect = document.myForm.myMenu.selectedIndex; location.href = document.myForm.myMenu.options[mySelect].value; } // --> </script> <form name="myForm"> <select name="myMenu" onChange="MENU()"> <option value="">A</option> <option value="a001.html">A001</option> <option value="a002.html">A002</option> <option value="a003.html">A003</option> </select> <select name="myMenu2" onChange="MENU()"> <option value="">B</option> <option value="b001.html">B001</option> <option value="b002.html">B002</option> <option value="b003.html">B003</option> </select> </form> ご指南の程宜しくお願いします。

  • 複数のvalue値を返すには

    Aを選択した時10、Bを選択した時100、Cなら1000と <input type="text" name="TEXT" value="">に表示されるように以下のようなjavascriptを記述しましたが、 Aの時10と20を、Bの時100と200、Cの時1000と2000が もうひとつの<input type="text" name="TEXT2" value="">に表示できるようにするにはどうしたらよいのでしょうか。 記述方法を教えていただければ一番いいのですが、サンプルがあるページでもいいので、教えてください。 <script type="text/javascript"> <!-- function kai(){ document.FORM.TEXT.value = document.FORM.num.value; } //--> </script> </head> <body> <form name="FORM"> <input type="text" name="TEXT" value=""> <select name="num" onChange="kai()"> <option value="10">A</option> <option value="100">B</option> <option value="1000">C</option> </select> </form>

  • 複数プルダウンでメニューを初期表示に戻したい

    No.157334でleaz024さんに「複数プルダウンメニュー」について教えてもらったものですが、ひとつ、追加したいことがあるので教えてください。 教えていただいたスクリプトは <script language="javascript"> <!-- function A_Li() {   Sel=document.Link1.OP.selectedIndex;   Ms=document.Link1.OP.options[Sel].value;   parent.main.location.href=Ms;} function B_Li() {   Sel=document.Link1.OP2.selectedIndex;   Ms=document.Link1.OP2.options[Sel].value;   parent.main.location.href=Ms;} // --> </script> <FORM name="Link1"> <SELECT name="OP" onChange="A_Li()" size="1"> <OPTION Value="main.htm" SELECTED>ページを選んでください <option value="main.htm">ぺージ1</option> <OPTION Value="abc.htm">ページ2 <OPTION Value="def.htm">ページ3 </SELECT> <SELECT name="OP2" onChange="B_Li()" size="1"> <OPTION Value="aaa.htm" SELECTED>ページを選んでください <option value="bbb.htm">ぺージ1</option> <OPTION Value="ccc.htm">ページ2 <OPTION Value="ddd.htm">ページ3 </SELECT> です。 例えば OP2のメニューをクリックしたあと OP3のメニューをクリックしたときにOP2のメニューが初期の 表示メニューに戻したいのですが、どう変えればよいでしょうか。 初心者なので本を見てみたのですがわかりませんでした。 どうぞよろしくお願いいたします。

  • Stack overflow line at:0のエラーについて

    はじめまして。 先日も質問させていただき、見事に解決できたのでまた質問させていただきます。 タイトルにもあるのですが、連動プルダウンを使用したJavascriptでエラーが出てしまいます。ネットでも色々と調べ呼び出しのメモリが不足している、キャッシュが多いなど載っていましたが、どうもPCそのものの問題ではないようです。 それ以外では構文のエラーということだったのでフリーソフトのエラーチェックを行ったのですが、特に問題はなかったです。 プルダウンは全部で20個あり初めの4個は選択後に次のプルダウンに移行すると必ずStack overflowのエラーがでます。 不躾な質問で申し訳ないですが、何か問題があるのかご教授いただけないでしょうか? よろしくお願いします。 以下は構文になります。 <html> <head> <title>テンプレtest</title> <script type="text/javascript"src="ConnectedSelect.js"></script> <script> function Jump(f){ for(var i=0;i<f.length;i++){ if(f[i].type=="select-one" && f[i].value.match(/\.html?$/)){ window.open(f[i].value,'_blank'); break; } } } </script> </head> <body> <form> 項目1<select name="SEL1"> <option value="">-----------</option> <option value="aa">aa</option> </select> 項目2<select name="SEL2"> <option value="">-----------</option> <optgroup label="aa"> <option value="aa1">aa1</option> <option value="aa2">aa2</option>     <option value="bb1">bb1</option> </optgroup></select>              ・              ・              ・              ・ 項目20<select name="SEL20"> <option value="">-----------</option> <optgroup label="zz"> <option value="zz1">zz1</option> <option value="zz2">zz2</option>     <option value="***.html">***</option> </optgroup></select> <input type="button" value="Go" onClick="Jump(this.form)"> <script type="text/javascript">ConnectedSelect (['SEL1','SEL2','SEL3','SEL4','SEL5','SEL6','SEL7','SEL8','SEL9','SEL10','SEL11','SEL12','SEL13','SEL14','SEL15','SEL16','SEL17','SEL18','SEL19','SEL20']); </script> </form> </center> </body> </html>