• ベストアンサー

FireFoxでfocus()が上手く動かない

javascriptを使って、 フォームのテキストエリアの入力文字数をチェックし、 オーバーしていれば、アラートを出し、テキストエリアにフォーカスを移動させる。 ようにしようとしています。 IEでは動いてのですが、FireFoxだと上手くフォーカスが移動してくれません。 どこがまずいのか、教えてください。 コード <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> <!-- function checkText(aText) { if (aText.value.length > 1) { alert('サイズオーバーです'); aText.focus(); } } //--> </script> </head> <body> <form method="post" action="#"> <input type="text" name="fmTitle" onBlur="checkText(this)"> <input type="text" name="dummy"> </form> </body> </html>

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

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

要するに、イベント中に別イベントが発生するのがよろしくないのだと思います。 泥臭い対処ですが、イベントが終了してから実行するような感じでどうでしょうか ---------------------------------------------------------------- var TimeID=null; function setFocus(fn){ clearTimeout(TimeID); document.forms[0][fn].focus(); document.forms[0][fn].value +=""; } function checkText(aText){ if (aText.value.length > 1) { alert('サイズオーバーです'); //aText.focus(); // TimeID=setTimeout("setFocus('fmTitle')",300);//時間を置いて実行する TimeID=setTimeout("setFocus('"+ aText.name + "')",300); } }

xyz_1990
質問者

お礼

解決しました。 ありがとうございます。

その他の回答 (2)

回答No.2

こんばんは。 Firefoxでのエラーとのことですが、現在FireFoxでは.Focus()イベントでエラーが出ることが確認されているようです。Firefoxは未使用なのでこちらでは確認できませんが日本語で書かれているページがありましたので参考URLもご確認ください。

参考URL:
http://www2.ns-labs.com/cgi-bin/security_detail_2.cgi?os=win&id=9&p=49
xyz_1990
質問者

お礼

ご回答ありがとうございます。 #3さんの方法で、解決しました。 が、focus()は気をつけた方がよさそうですね。

回答No.1

http://mrmx.blogspot.com/2005/12/javascript-firefox-onblur-focus.html 読んでませんがFirefox側のバグかもしれません calling this.blur() in onfocus handler or this.focus() in an onblur handler do not work https://bugzilla.mozilla.org/show_bug.cgi?id=53579

xyz_1990
質問者

お礼

ありがとうございます。 せっかく教えていただいたのですが、 英語はちょっと。。。です。 私の手におえなさそうなので、 別チェック方法を考えようかと思います。

関連するQ&A

  • onChangeの使い方について教えてください。

    javascriptで困っています。助けてください。 テキストボックスに入力された値をonChangeで検出し、入力内容をチェックしようとしています。 テキスト入力後、テキストボックスからフォーカスを外せば、問題なく作動するのですが、 テキストを入力し、フォーカスを外さずに、そのまま送信ボタンを押すと、 チェック結果を待たずに、次のファイル(画面)に移ってしまいます。 多分、onChangeを使う上で、よく発生する問題かと思うのですが、 みなさん、どのように回避されているのでしょうか? <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> <!-- function check(){ alert('チェック'); } //--> </script> </head> <body> <form method="get" action="reg.php"> タイトル<br> <input type="text" name="title" onChange="check()"><br> <input type="submit" value="送信"><br> </form> </body> </html>

  • このソースどういう意味ですか【JavaScript】

    <HTML> <HEAD> <TITLE>JavaScript Sample</TITLE> <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript"> </HEAD> <BODY> : <INPUT TYPE="button" VALUE="OK" onClick="~"> : </BODY> </HTML> このソースの中の <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript"> の部分ってどういう意味ですか? 特にTypeとHTTP-EQUIVの部分については個別で詳しく知りたいです。 回答よろしくお願いします。

  • formとalert

    javascript初心者です。 formを使ってテキストボックスに入力された文字をalertを使って表示させたいのですが、functionの中の記述がよくわかりません。 formを使った参考資料も見つからず質問するに至りました。 教えていただければと思います。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>練習</title> <script type="text/javascript"> </script> </head> <body> <form name="a">文字を入力: <input type="text"size="20" name="name1" ><br> <input type="button" name="name2" value="確認" onclick="alert(chk)"> </form> <script type="text/javascript"> function chk(){ var n=document.a.name1.value; alert(n); } </script> </body> </html>

  • focus()が上手くいかない

    困っています、助けてください。 フォームのテキストボックスの入力された文字数をチェックし、 サイズオーバーなら、アラートを表示し、テキストボックスにフォーカスを移動させたい。 のですが、上手く動いてくれません。 コードは次の通りです。どこがおかしいのか?どうすれば改善できるのか? 教えてください。 <form method="post" action="#"> <input type="text" name="fmTitle" onBlur="checkText(this)"> </form> <script type="text/javascript"> <!-- function checkText(aText) { if (aText.value.length > 100) { alert('サイズオーバーです'); aText.focus(); } } //--> </script>

  • フォーカスが外れたときの動作について

    お世話になります。 あるテキストフィールド(text1)をクリックした際に隠れている別のテキストフィールド(text2)を表示し、 フォーカスが外れるとtext2を再度隠すというコードを書きました。 <html> <head> <style> <!-- #text2 { display: none; } --> </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> <!-- $(function() { $("#text1").click(function() { $("#text2").show(); }).blur(function() { $("#text2").hide(); }); }); --> </script> </head> <body> <form> <input type="text" id="text1" value=""/> <input type="text" id="text2" value=""/> </form> </body> </html> この場合、text1をクリックしたときにtext2が表示されて、フォーカスが外れるとtext2が隠れるのは想定通りの動作なのですが、これをtext2をクリックした場合にはtext1からフォーカスが外れてもtext2を表示したままということはできるのでしょうか。 blurの中でtext2がクリックされた時みたいな検知ができれば実現できると思うのですがそのようなことってできますでしょうか。 よろしくお願いいたします。

  • ファイヤーフォックスでCSSが読み込まれません

    会社のホームページを担当していて困っています。 IEでは、きちんと表示されるのですが ファイヤーフォックスですとCSSを認識してくれないようです。 下記が自分会社のソースです。 何が悪いのでしょうか? よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="ja"> <head> <title></title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/JavaScript"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <SCRIPT language=javascript src="js/libs.js" type=text/javascript></SCRIPT> <meta name="ROBOTS" content="ALL"> <<link href="css/stylesheet.css" rel="stylesheet" type="text/css" media="all"> </head>

  • javascript + php でエラー

    エラーを取り除くことができず、困っています。 助けてください。 下記のようなコードで、PHPからjavascriptに文字列を渡しているのですが、 文字列に改行コードがあるとエラーになってしまいます。 (改行コードがない場合はエラーはでません) 文字コードはEUC-JP、改行はLFとしています。 エラーの原因と、対策を教えてください。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> <!-- function sampl(str) { alert(str); } //--> </script> </head> <body> <form method="post" action="#"> <?php $str = "テスト\n改行あり"; ?> <input type="button" value="実行" onClick="sampl('<?=$str?>')"> </form> </body> </html>

  • javascriptでselectboxのvalueを取得し、特定のv

    javascriptでselectboxのvalueを取得し、特定のvalue値により、「<input type="text" name~>」をブラウザに表示させたいのですが、やり方がわかりません。 javascriptについて素人です。 jQUERYを使用して、phpのようにif文を追加したらいけるのかなと思って下記のようにやってみたのですが、更新しないと変わりませんでした。。 どなたかお力を貸して下さい!どうか宜しくお願い致します! ========================================== <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp" /> <meta name="robots" content="noindex,nofollow" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript" src="/admin/js/jquery-1.2.3.js" ></script> <script type="text/javascript"> $(function() { hogehoge = $("#abcdefg").val(); if(hogehoge !== '3'){ $('#hijklmn').hide(); } }); </script> </head> <body> <form method="post" action="/admin/~"> <select id="abcdefg"> <option value="1">aaaaaaaa</option> <option value="2">bbbbbbbb</option> <option value="3">cccccccc</option> </select> <div id="hijklmn"> 上のセレクトボックスが3の場合のみ、下記のフォームを表示させたい <input type="text" value="ああああああああ" /> </div> </form> </body> </html>

  • htaについて。親画面子画面を認識したい

    現在ローカルPC内で本番環境をさわる前のシュミレーション用にhtaを使って擬似環境を作っています。 htaで親画面子画面での値の受渡しやopenerを使って親画面を最前面に表示をしたいと思います。 以下のhtmlだとうまく値を受渡し後、親画面を最前面に表示できたのですがhtaにhtmlを切り替えて 同じように動かそうとすると以下のエラーがでました。 [window.opener.frm1はNullまたはオブジェクトではありません。] ネットで調べてみましたがhtaでopenerを使う方法などがうまく見つかりません。 どなたかご教授願います。宜しくお願いいたします。 *テストした内容 --親window(test1.html)-- <HTML> <HEAD> <META HTTP-EQUIV="Content-Language"CONETNT="ja"> <META HTTP-EQUIV="Content-Type"CONTENT="text/html;CHARSET=shift_jis"> <TITLE><練習用>エリア応対支援</TITLE> <Script Language="JavaScript"> resizeTo(400,400); function wopen4(){ window.open('test2.html','_blank'); } </SCRIPT> </HEAD> <BODY> <FORM name="frm1"> <input type ="button" onClick="wopen4()" value="子オープン"><br> <input ="text" NAME="text1"> </FORM> </BODY> </HTML> --子window(test2.html)-- <HTML> <HEAD> <META HTTP-EQUIV="Content-Language"CONETNT="ja"> <META HTTP-EQUIV="Content-Type"CONTENT="text/html;CHARSET=shift_jis"> <TITLE>子ウィンドウ</TITLE> <Script Language="JavaScript"> resizeTo(300,400); function w_od(){ window.opener.frm1.text1.value=frm2.text2.value; } function w4cus(){ window.opener.focus(); } </SCRIPT> </HEAD> <BODY> <FORM name="frm2"> <input ="text" class="inset2" NAME="text2"> <input type="button" class="outset4" onclick="w_od();w4cus()" value="設定" > </FORM> </BODY> </HTML>

    • ベストアンサー
    • HTML
  • ファイヤーフォックスでCSSが機能しません

    会社のホームページを担当していて困っています。 IEでは、きちんと表示されるのですが ファイヤーフォックスですとCSSを認識してくれないようです。 下記が自分会社のソースです。 何が悪いのでしょうか? よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="ja"> <head> <title></title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/JavaScript"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <SCRIPT language=javascript src="js/libs.js" type=text/javascript></SCRIPT> <meta name="ROBOTS" content="ALL"> <<link href="css/stylesheet.css" rel="stylesheet" type="text/css" media="all"> </head>

専門家に質問してみよう