変更のかかったテキストフィールドに再度フォーカスを設定するには？
- テキストフィールドを複数用意し、１つのフォームに対して変更が掛かった時にフィールド名をアラートで表示し、再びフォーカスを変更したテキストフィールドに戻すソースを組みたいと考えています。
- 下記のソースを組んだのですが、？の部分の指定がうまくいかず、苦戦しております。上記のことを行うには、？の部分をどう記述すべきかご教示いただけませんでしょうか。
- 皆様のお力を御貸しください。どうぞよろしくお願い致します。
- ベストアンサー
変更のかかったテキストフィールドに再度フォーカスを設定するには？
お世話になります。 テキストフィールドを複数用意し、 １つのフォームに対して変更が掛かった時にフィールド名をアラートで表示し、 再びフォーカスを変更したテキストフィールドに戻すソースを組みたいと考えています。 （結果、ループのような形になりますが、、、例として捕らえてください。。） 下記のソースを組んだのですが、？の部分の指定がうまくいかず、苦戦しております。 上記のことを行うには、？の部分をどう記述すべきかご教示いただけませんでしょうか。 皆様のお力を御貸しください。どうぞよろしくお願い致します。 <script type="text/javascript" > function fnc_OnChangeFields(Fieldname,Fieldvalue){ with(document.f1){ alert(Fieldname); ?????????.focus(); } } </script> <body> <form method="post" name="f1"> <tr> <td> \<input TYPE="text" NAME="field1" onchange="return fnc_OnChangeFields(this.name,this.value)"></td> <td> \<input TYPE="text" NAME="field2" onchange="return fnc_OnChangeFields(this.name,this.value)"></td> <td> \<input TYPE="text" NAME="field3" onchange="return fnc_OnChangeFields(this.name,this.value)"></td> </tr> </body>
- reed1982
- お礼率100% (1/1)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
document.f1.***.focus(); の、「***」の部分に任意の変数に入った文字列を当てはめる場合はelementsを使います。elementsはフォーム部品のオブジェクトの配列ですが、直接nameで指定することができます。 この場合は with(document.f1){ alert(Fieldname); elements[Fieldname].focus(); } こうなります。 または指定するフォーム部品にnameと同じ値のIDを設定しておき、 document.getElementsByName(Fieldname)[0].focus(); としても可能です。
関連するQ&A
- formのtextフィールドが認識されない
下記のようなフォームに対し、JavaScriptで処理を行おうとしています。 <form name="dateForm" method="post" action=""> <table> <tr><td>0</td> <td><input type='text' name='date[]' maxlength='8' size=12 value='20111001'></td> <td><input type='text' name='date2[]' maxlength='8' size=12 value=''></td></tr> <tr><td>1</td> <td><input type='text' name='date[]' maxlength='8' size=12 value='20111002'></td> <td><input type='text' name='date2[]' maxlength='8' size=12 value=''></td></tr> <tr><td>2</td> <td><input type='text' name='date[]' maxlength='8' size=12 value='20111003'></td> <td><input type='text' name='date2[]' maxlength='8' size=12 value=''></td></tr> </table> <input type='text' name='date_0' maxlength='8' size=12 value='20111000'><br><br> <input type="submit" name="button" value="Check" onClick="send_self();"> <input type="submit" name="button" value="Enter" onClick="set_action();"> </form> Checkボタン押下で上記の関数を呼び出し、テキストフィールドdate[0]の値を表示すると、(1)では「20111001」と正しい値が表示されますが、(2)では下記のエラーが出てしまいます。 「プロパティ '0' の値を取得できません: オブジェクトは Null または未定義です。」 また、 alert(document.dateForm.elements[0]); // … (3) alert(document.dateForm.date); // … (4) とすると、(3)では[object]、(4)では[undefined]と表示されます。 alert(document.dateForm.date_0.value); はvalueも正しく表示されobjectとしても正しく認識されるので、配列へのアクセスに問題があるように思うのですが…。 問題点と解決法をご存知の方がいらっしゃいましたら、どうぞよろしくお願い致します。m(＿ ＿；)m
- ベストアンサー
- JavaScript
- 再度読み込みは出来ないのでしょうか？
各テキストボックスに値を入れて、 C11 = a11 * b11 + a12 * b21 + a13 * b31、 c12 = a11 * b12 + a12 * b22 + a13 * b32、 ： ： c21 = a21 * b11 + a22 * b21 + a23 * b31 c22 = a21 * b12 + a22 * b22 + a23 * b32・・・ としたいのですが、うまくロジックが思いつきません。 単純に式をずらずら書いたのですが、c12以降の欄がすべてゼロになってしまいます。 いい方法を教えてください。お願いします。 <head> <script> function kei(){ var form_a=document.getElementById('A'); var form_b=document.getElementById('B'); var form_c=document.getElementById('C'); var keic11 = 0; var keic12 = 0; : : keic11=parseInt(form_a.a11.value) * parseInt(form_b.b11.value) * parseInt(form_a.a12.value) * parseInt(form_b.b21.value) + parseInt(form_a.a13.value) * parseInt(form_b.b31.value); form_c.c11.value = keic11; keic12=parseInt(form_a.a11.value) * parseInt(form_b.b12.value) + parseInt(form_a.a12.value) * parseInt(form_b.b22.value) + parseInt(form_a.a13.value) * parseInt(form_b.b32.value); form_c.c12.value = keic12; ： ： } </script> </head> <body> <table border = 1> <form id = "A"> <tr> <td> <input type = "text" size = 5 name = "a11"></input> </td> <td> <input type = "text" size = 5 name = "a12"></input> </td> <td> <input type = "text" size = 5 name = "a13"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "a21"></input> </td> <td> <input type = "text" size = 5 name = "a22"></input> </td> <td> <input type = "text" size = 5 name = "a23"></input> </td> </tr> </form> </table> <table boeder = 1> <tr> <input type = "button" onClick="kei()" value = "×"></input> </tr> </table> <table border = 1> <form id = "B"> <tr> <td> <input type = "text" size = 5 name = "b11"></input> </td> <td> <input type = "text" size = 5 name = "b12"></input> </td> <td> <input type = "text" size = 5 name = "b13"></input> </td> <td> <input type = "text" size = 5 name = "b14"></input> </td> <td> <input type = "text" size = 5 name = "b15"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "b21"></input> </td> <td> <input type = "text" size = 5 name = "b22"></input> </td> <td> <input type = "text" size = 5 name = "b23"></input> </td> <td> <input type = "text" size = 5 name = "b24"></input> </td> <td> <input type = "text" size = 5 name = "b25"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "b31"></input> </td> <td> <input type = "text" size = 5 name = "b32"></input> </td> <td> <input type = "text" size = 5 name = "b33"></input> </td> <td> <input type = "text" size = 5 name = "b34"></input> </td> <td> <input type = "text" size = 5 name = "b35"></input> </td> </tr> </form> </table> 答え <table border = 1> <form id = "C"> <tr> <td> <input type = "text" size = 5 name = "c11"></input> </td> <td> <input type = "text" size = 5 name = "c12"></input> </td> <td> <input type = "text" size = 5 name = "c13"></input> </td> <td> <input type = "text" size = 5 name = "c14"></input> </td> <td> <input type = "text" size = 5 name = "c15"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "c21"></input> </td> <td> <input type = "text" size = 5 name = "c22"></input> </td> <td> <input type = "text" size = 5 name = "c23"></input> </td> <td> <input type = "text" size = 5 name = "c24"></input> </td> <td> <input type = "text" size = 5 name = "c25"></input> </td> </tr> </form> </table> </body>
- ベストアンサー
- JavaScript
- selectでinputの表示を変えたい
セレクトを選択した時に、inputの一部をdisabledにし、同時にinputの背景色を変更したいと思っています。 ----------------------------------------------------------------------- 現在はこんな感じです。 function menuLink(linkLoc) { if(linkLoc !="") { ifrm.location.href=linkLoc;} } --- セレクト１ <SELECT style="WIDTH: 130px" onchange="menuLink(this.options[this.selectedIndex].value)"> <OPTION value="11.html">1</OPTION> <OPTION value="22.html">2</OPTION> <OPTION value="33.html">3</OPTION> セレクト２ <SELECT style="WIDTH: 130px" onchange="menuLink(this.options[this.selectedIndex].value)"> <OPTION value="44.html">1</OPTION> <OPTION value="55.html">2</OPTION> <OPTION value="66.html">3</OPTION> セレクト３ <SELECT style="WIDTH: 130px" onchange="menuLink(this.options[this.selectedIndex].value)"> <OPTION value="77.html">1</OPTION> <OPTION value="88.html">2</OPTION> <OPTION value="99.html">3</OPTION> (実際にはもっと多くのセレクトがあります) <TR> <TD><INPUT type="text" name="aa" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="ba" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="ca" size="10" maxlength="2"></TD></TR> <TR> <TD><INPUT type="text" name="ab" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="bb" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="cb" size="10" maxlength="2"></TD></TR> <TR> <TD><INPUT type="text" name="ac" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="bc" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="cc" size="10" maxlength="2" /></TD></TR> <TR> <TD><INPUT type="text" name=da readOnly value=0 size=10></TD> <TD><INPUT type="text" name=ea readOnly value=0 size=10></TD> <TD><INPUT type="text" name=fa readOnly value=0 size=10></TD></TR> <TR> <TD><INPUT type="text" name=db readOnly value=0 size=10></TD> <TD><INPUT type="text" name=eb readOnly value=0 size=10></TD> <TD><INPUT type="text" name=fb readOnly value=0 size=10></TD></TR> <TR> <TD><INPUT type="text" name=dc readOnly value=0 size=10></TD> <TD><INPUT type="text" name=ec readOnly value=0 size=10></TD> <TD><INPUT type="text" name=fc readOnly value=0 size=10></TD></TR> ----------------------------------------------------------------------- セレクト１のどれかを選択した時に、インプットのaa,ba,da,eaをdisabledにし、同時にaa,ba,da,eaの背景色を変更 セレクト２のどれかを選択した時に、インプットのab,bb,db,ebをdisabledにし、同時にab,bb,db,ebの背景色を変更 という感じにしたいのですが、可能でしょうか？ 可能であれば書き方を教えていただけると助かります。 よろしくおねがいします。
- 締切済み
- JavaScript
- ボタンクリックでフォーカス移動
JavaScript超ビギナーなので方法がよくわかりません。 フォームにテキストボックス（配列）４個あり ボタンを押すたびに未記入のテキストボックスにカーソルを移動したいのですが。どのようにしたらいいでしょうか。 <form name="form1" method="post"> <table width="200" border="1"> <tr><td ><input type="submit" name="Submit" value="送信"></td></tr> <tr><td ><input type="text" name="name1"></td></tr> <tr><td><input type="text" name="name1"></td></tr> <tr><td><input type="text" name="name1"></td></tr> <tr><td><input type="text" name="name1"></td></tr> </table> </form>
- ベストアンサー
- JavaScript
- CFLOOPで計算させたいのですが（２）
先ほどとの関連になりますが、 <SCRIPT LANGUAGE="JavaScript"> <!--JavaScript function TotalSum(i) { var evalStr = eval("document.sum" + i); with(evalStr) { if(!isNaN(text1.value) && !isNaN(text2.value) && !isNaN(text3.value) && text1.value && text2.value && twxt3.value); { text4.value = eval(text1.value) + eval(text2.value) - eval(twxt3.value); } if( !isNaN(text5.value) && !isNaN(text6.value) && text5.value && text6.value); { text7.value = eval(text4.value) + eval(text5.value) + eval(text6.value); } } } // --> </script> </head> <body> <TABLE BORDER="1"> <FORM name="myform" action="url" method="post" onSubmit="TotalSum(' + i + ');return false;"> <cfloop index="i" from="1" to="10"> <TR> <TD><input type="text" name="text1" onChange="TotalSum('+i+')" value="0"></TD> <TD><input type="text" name="text2" onChange="TotalSum('+i+')" value=""></TD> <TD><input type="text" name="text3" onChange="TotalSum('+i+')" value="0"></TD> <TD><input type="text" name="text4" onChange="TotalSum('+i+')" value="0"></TD> <TD><input type="text" name="text5" onChange="TotalSum('+i+')" value=""></TD> <TD><input type="text" name="text6" onChange="TotalSum('+i+')" value=""></TD> <TD><input type="text" name="text7" onChange="TotalSum('+i+')" value="0"></TD> </TR> </cfloop> </form> </TABLE> </body> また、見当はずれなこと言っていたらすみません。
- 締切済み
- その他(データベース)
- input textでペーストした瞬間フォーカス移動
input type="textが縦にたくさんあり、 text1[n番目]に文字をペーストするのですが ペーストした瞬間フォーカスをtext1[n]からtext1[n+1]に移動したいのですがonChangeだとうまくペーストした瞬間に移動できません。 良い方法はあるでしょうか。 <input type="text" size="21" value="" name="text1"><br> <input type="text" size="21" value="" name="text1"><br> ・ ・ ・
- 締切済み
- JavaScript
- JavaScriptを使った計算フォーム
JavaScriptを使った計算フォームで質問です。 人数をテキストボックスに入力し、そのあと項目を選ぶと計算がされるようにしたいのですが ラジオボタンが持っているvalueを取り出せません。 下記の「←------???」と書いてあるところを何とかすれば完成だと思うのですが、 どなたか教えていただけないでしょうか？ <script language="JavaScript" type="text/JavaScript"> function sjLeft(source,length) { if (source.length < length) { return (""); } return source.substr(0, length); } function sjReplace(source,start,length,target) { sjlen = source.length; if ((start > sjlen) || (start < 0)) { return String(""); } return String(sjLeft(source,start ) + target + source.substr(start+length, sjlen)); } function sjInsert( source, start, target) { return sjReplace(source,start,0,target); } function fcheck(obj) { s1_2value = ??? * new Number(document.form1.n1.value); ←------??? document.form1.s1_2.value = String(s1_2value); document.form1.total.value = s1_2value; return true; } </script> <form name="form1" method="POST"> <table width="400" border="1"> <tr> <td>人数</td> <td></td> <td><input type=text name=n1 size=8 onChange="fcheck(this);">人</td> <td></td> </tr> <tr> td><input name="n2" type="radio" value="13000" onChange="fcheck(this);">食事A</td> <td>\13,000</td> <td>×人数</td> <td><input name=s1_2 type=text size=8 readonly>円</td> </tr> <tr> <td colspan="2"> </td> <td>総計</td> <td><input type=text readonly name=total size=10>円</td> </tr> </table> </form>
- ベストアンサー
- JavaScript
- テキストボックスのフォーカス移動
こんにちは。 htmlページで<input type="text"/>に既定の桁数を入力したら次のinputにフォーカスを 移動させたいと考えています。 下の例の場合、１番目のテキストボックスに既定の桁数5ケタを入力したら、フォーカス を２番目のテキストボックスに移動させ、２番目のテキストボックスに4ケタ入力したら ３番目のテキストボックスにフォーカスを移動させるようにしたいと思っています。 スクリプトの再利用ができるよう、たとえば同じname属性を与えればその範囲内で 簡単にフォーカスを移動させられるようなものにしたいと思うのですが、うまくいきません。 何か良い書き方はありませんでしょうか？ <div> <input type="text" name="hoge" maxlength="5" onkeyup="test(this)"/> <input type="text" name="hoge" maxlength="4" onkeyup="test(this)"/> <input type="text" name="hoge" maxlength="5" onkeyup="test(this)"/> <input type="text" name="hoge" maxlength="2" onkeyup="test(this)"/> </div> ・ ・ <script type="text/javascript"> function test(elm) { if (elm.value.length >= elm.maxLength) { /*（気持ちとしては、ここにこのような感じのことを書きたいのですが・・・） var arr_elm = document.getElementsByName(elm.name); var n = elm.index + 1 arr_elm[n].focus(); */ } } </script>
- ベストアンサー
- JavaScript
- 複数のテキストフィールドを同時にfocusする
ブラウザの仕様から考えてもダメもとですが。。。 JavaScriptで1ページに複数あるテキストフィールドを同時にfocusまたは入力値を選択状態する方法はありませんか？JavaScript以外でも構いません。 ちなみに、テキストフィールドのname属性が同じ場合です。 【例】 <form name="form1"> <input type="text" name="qqq" size="30"> </form> <form name="form2"> <input type="text" name="qqq" size="30"> </form>
- 締切済み
- JavaScript
- IE7のonChangeイベントを使用して入力チェック
textフィールドのonchangeイベントでjavascriptの入力チェックを行い、エラー時はフォーカスをエラー項目に戻し、カーソルを移動できないようにしたいです。 --想定している動作 (1)test1_fieldに1以外の値を入力し、tabなどで移動する。 (2)javascriptのcheck1()でエラーチェック。エラー「test1_field NG」が表示され、カーソルがtest1_fieldに戻る。 再度、カーソルを移動しようとすると、(2)の動作を行う。 --実際の動作 IE6(XP+IE6sp2)では、以下のテストスクリプトで想定している動作をしていたのですが、IE7(Vista+IE7)では、return falseを返しても、test2_fieldにフォーカスが移動できてしまいます。 --テストコード <html> <script> function check1(obj){ if (obj.value==1){ return true; } alert("test1_field NG"); obj.focus(); obj.select(); return false; } function check2(obj){ if (obj.value==2){ return true; } alert("test2_field NG"); obj.focus(); obj.select(); return false; } </script> test1_field:<input type="text" name="test1_field" onchange="return check1(this)" >(1のみOK)<br><br> test2_field:<input type="text" name="test2_field" onchange="return check2(this)" >(2のみOK) </html> 記述等に間違いがあるのでしょうか？ ご教授いたがければ幸いです。
- 締切済み
- JavaScript
お礼
is_may様 ご指南ありがとうございました！ 上記方法にてやりたいことが実現しました。 ファンクション最後に return false; を追記することで動作しました。 with(document.f1){ alert(Fieldname); elements[Fieldname].focus(); return false; } ご回答頂き、ありがとうございました。 またご縁がありましたら、よろしくお願い致します。