- ベストアンサー
ボタンクリックでテキストボックスにフォーカスを移動する方法
- JavaScript超ビギナーでもわかる！ボタンクリックで未記入のテキストボックスにカーソルを移動する方法を解説します。
- JavaScriptを使って、フォーム内の未記入のテキストボックスに簡単にカーソルを移動する方法をご紹介します。
- この記事では、JavaScriptを使ってボタンクリックでフォーカスを移動させる方法を解説します。
- obone
- お礼率51% (111/215)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- steel_gray
- ベストアンサー率66% (1052/1578)
提示したHTMLのほかに、カーソル移動ボタンを追加して、という事でしょうか？それとも送信ボタンを使って？？ どうも、目的とか動作イメージがよくわからないです。 単純に上からフォーカスを移動させるだけなら、キーボードのTABキーを押してもらえばいいのですが。
補足
マウスしかつかえないので。（ボタンで移動以外は変更不可仕様なので） たとえば必ずtext1[0]にあわせるなら下記でなるのですが 未記入のテキストボックスを探す方法がわかりません。 "送信"を押すたびに未記入のtext1[0～3]に移動したいのです。 <html> <body onload="document.form1.text1[0].focus();"> <form name="form1"> <input type="submit" name="Submit" value="送信" onClick="document.form1.text1[0].focus();"><BR> <input type="text" size="21" value="" name="text1" /><br /> <input type="text" size="21" value="" name="text1" /><br /> <input type="text" size="21" value="" name="text1" /><br /> <input type="text" size="21" value="" name="text1" /><br /> </body> </html>
関連するQ&A
- サブウィンドウから親ウィンドウのフォームへの書き込み
よろしくお願いします。 やりたい事は サブウィンドウを開いて サブウィンドウのテキストボックスに入力した内容を 親ウィンドウのテキストボックスに書き込みたいのです。 以下親ウィンドウ（oya.html） <html> <head> <script type="text/javascript"> <!-- function search(){ window.open( 'sub.html' ,'childwin', "width=350,height=250,location=no,menubar=no,toolbar=no,resizable=yes,scrollbars=yes" ); } --> </script> </head> <body> <form name="mainform" method="POST" action="hoge.php"> <TABLE border="1"> <TR> <TD>A:<INPUT type="text" name="A" id="A"></TD> </TR> <TR> <TD>B:<INPUT type="text" name="B" id="B"></TD> </TR> <TR> <TD><input type="button" onclick="search();return false;" value="サブウィンドウ"></TD> </TR> <TR> <TD><center><input type="submit" name="exec" value="確認"></center></TD> </TR> </TABLE> </form> </body> </html> 以下サブウィンドウ（sub.html） <html> <head> <script type="text/javascript"> <!-- --> </script> </head> <body> <form name="subform"> <TABLE border="1"> <TR> <TD>A:<INPUT type="text" name="A" id="A"></TD> </TR> <TR> <TD>B:<INPUT type="text" name="B" id="B"></TD> </TR> <TR> <TD><input type="button" value="入力"></TD> </TR> </TABLE> </form> </body> </html> 以上です。親ウィンドウの中にformが入れ子状態になってしまうため javascriptで対応できないのかと思い質問させて頂きました。 ご教示お願いいたします。
- ベストアンサー
- JavaScript
- javascriptによる計算
テキストボックス「a1～6」の値とテキストボックス「b1～6」に入力された値を足し算してテキストボックス「ｃ1～6」（例…c[i] = a[i] + b[i]）を計算するJavaScriptを作成しているのですが、結果がundefinedになってしまい上手くいきません。どうやったら動くのかどうかご教授ください。 以下ソース↓ <script language ="JavaScript"> function plus() { var intResult = 0; for (i=1; i<=6; i++){ intResult[i] = 0; if (!isNaN(document.forms["A"].all["a"+i].value) && !isNaN(document.forms["B"].all["b"+i].value)){ intResult[i] += parseInt(document.forms["A"].all["a"+i].value); intResult[i] += parseInt(document.forms["B"].all["b"+i].value); } <table border = 1> <tr> <td> <table border = 1> <tr> <td> <form name="A"> <input type = "text" size = 5 name = "a1"></input> </td> <td> <input type = "text" size = 5 name = "a2"></input> </td> <td> <input type = "text" size = 5 name = "a3"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "a4"></input> </td> <td> <input type = "text" size = 5 name = "a5"></input> </td> <td> <input type = "text" size = 5 name = "a6"></input> </form> </td> </tr> </table> </td> <td> <table boeder = 1> <tr> <input type = "button" onClick="plus()" value = "＋"></input> </tr> </table> </td> <td> <table border = 1> <tr> <td> <form name = "B"> <input type = "text" size = 5 name = "b1"></input> </td> <td> <input type = "text" size = 5 name = "b2"></input> </td> <td> <input type = "text" size = 5 name = "b3"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "b4"></input> </td> <td> <input type = "text" size = 5 name = "b5"></input> </td> <td> <input type = "text" size = 5 name = "b6"></input> </form> </td> </tr> </table> </td> </tr> </table> 答え <form name = "C"> <table border = 1> <tr> <td> <input type = "text" size = 5 name = "c1"></input> </td> <td> <input type = "text" size = 5 name = "c2"></input> </td> <td> <input type = "text" size = 5 name = "c3"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "c4"></input> </td> <td> <input type = "text" size = 5 name = "c5"></input> </td> <td> <input type = "text" size = 5 name = "c6"></input> </td> </tr> </table> </form> </body> document.C.all["c"+i].value = intResult[i]; } } </script>
- ベストアンサー
- JavaScript
- width="150" に収まるように・・・
ドリームウェーバーでページを触っているんですが、メルマガ登録のソースをいじると送信ボタンが効かなくなります。以下のソース部分をwidth="150"の場所に収まるようにしてフォームを小さくして、別のページに貼り付けたいのですが・・・ <table border="0" cellpadding="5" cellspacing="2" width="53%" bgcolor="#8888cc"> <tr> <td bgcolor="#ddddff"> <table border="0" cellpadding="0" cellspacing="2" width="100%"> <tr> <td colspan="2" valign="top"><span class="m_p"><b>■登録申込み（購読無料）</b></span></td> </tr> <tr> <td width="586" align="right"> <form action="http://e2.wingmailer.com/wingmailer/mr.cgi" method="post"> <input type="hidden" name="uid" value="E048"> <nobr>E-mail：</nobr></td> <td width="130"> <input type="text" name="email" size="24"> </td> </tr> <tr> <td width="586" align="right"><nobr>お名前：</nobr></td> <td width="130"> <input type="text" name="opt1" size="24"> </td> </tr> <tr> <INPUT TYPE="hidden" NAME="opt2" VALUE="エヴィエ"> <td width="586"> <input type="submit" value="購読する"></form> </td> </tr> </table> </td> </tr> </table>
- 締切済み
- HTML
- ボタンを押してテキストボックスを追加しテーブルの作成
avascriptでテキストボックスを追加したいのです。テーブルを組んで複数のnamaの違うボックスを追加したいです。 下記のようにイメージして書いたのですが、考えが詰まりました。 テーブルでなくても、2列複数行の形になればいいんですが・・・ 教えて下さい。よろしくお願いします。 <script type="text/javascript"> <!-- var tag_num = 4; function myAdd(){ var oTag = document.createElement("input"); oTag.setAttribute("type", "text"); oTag.setAttribute("name", "hoge" + tag_num++); oTag.setAttribute("name", "fuga" + tag_num++); var oDiv = document.getElementById("area"); oDiv.appendChild(oTag); } --> </script> </head> <body> <form id="form1" action="check.php" method="post"> <span id="area"> <table style="text-align: left; width: 100px;" border="1" cellpadding="2" cellspacing="2"> <tbody> <tr> <td><input type="text" name="hoge1" value=""></td> <td><input type="text" name="fuga1" value=""></td> </tr> <tr> <td><input type="text" name="hoge2" value=""></td> <td><input type="text" name="fuga2" value=""></td> </tr> <tr> <td><input type="text" name="hoge3" value=""></td> <td><input type="text" name="fuga3" value=""></td> </tr> </tbody> </table> </span> <input type="button" value="Add" onClick="myAdd()"> </form>
- ベストアンサー
- JavaScript
- フォームタグの中のラジオボタンの選択による制御
まず、サンプルのHTMLソースを書きます。 <html> <head> <title>プレゼント </title> head> <body> <center> <form method="post" action="https://regist02.smp.ne.jp/regist/Reg2"> table cellspacing="2" cellpadding="5" border="1"> <tr> <td>プレゼント</td> <td> <input type="radio" name="f000016397" value="1"> 希望する<br> <input type="radio" name="f000016397" value="2"> 希望しない<br> </td> </tr> <tr> <td>カラー</td> <td> <input type="text" name="f000009756" value="" maxlength="6"> </td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" value="送信"> </td> </tr> </table> </form> </center> </body> </html> この中で、「プレゼントを希望する」のラジオボタンをチェックした場合のみ、下のテキストボックスにカラーが入力できるようにしたいと思います。 「プレゼントの希望をしない」を選択しているのに、テキストボックスに文字が入力されたないように制御することはできるでしょうか？またはデータが送信されないで警告k画面が出る方法でもよいのですが。 宜しくお願いします。
- ベストアンサー
- JavaScript
- フォームタグの中のラジオボタンの選択による制御
まず、サンプルのHTMLソースを書きます。 <html> <head> <title>プレゼント </title> head> <body> <center> <form method="post" action="https://regist02.smp.ne.jp/regist/Reg2"> table cellspacing="2" cellpadding="5" border="1"> <tr> <td>プレゼント</td> <td> <input type="radio" name="f000016397" value="1"> 希望する<br> <input type="radio" name="f000016397" value="2"> 希望しない<br> </td> </tr> <tr> <td>カラー</td> <td> <input type="text" name="f000009756" value="" maxlength="6"> </td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" value="送信"> </td> </tr> </table> </form> </center> </body> </html> この中で、「プレゼントを希望する」のラジオボタンをチェックした場合のみ、下のテキストボックスにカラーが入力できるようにしたいと思います。 「プレゼントの希望をしない」を選択しているのに、テキストボックスに文字が入力されたないように制御することはできるでしょうか？またはデータが送信されないで警告k画面が出る方法でもよいのですが。 宜しくお願いします。
- ベストアンサー
- JavaScript
- メールフォームについて
この中にどのようなHTMLを書けば自分のPCにメールが届く ようになりますか？よろしくお願いします。 <h2>■MAIL FORM</h2> <div class="text"> <form><table><tr><td width="100" align=right> NAME</td><td align=right><input type="text" name="Name" size="34"></td></tr><tr><td width="100" align=right> MAIL</td><td align=right><input type="text" name="Mail" size="34"></td></tr></table> <TEXTAREA NAME="Comments" ROWS="8" COLS="39" value="comments"></TEXTAREA> <br> <table><tr><td width="100" align=right> </td> </tr><tr> <td width="100" align=right> URL</td><td><input type="text" name="URL" value="http://" size="34"></td></tr><tr><td></td><td align="right"> <INPUT TYPE="reset" VALUE=" Reset "> <INPUT TYPE="submit" VALUE=" Send "></FORM> </td></tr></table><br></div>
- ベストアンサー
- HTML
- フォーム htmlで項目をセット
下記フォームのページがあります。 http://hogehoge.com/form.html <form action="#" method="post"> <table border="1"> <tr> <td>名前</td> <td><input type="text" name="name"></td> <td colspan="2" align="center"> <input type="submit" value="入力"> </td> </tr> </table> </form> </body> </html> このフォームに http://hogehoge.com/form.html?name=xxx でアクセスすると、 nameの項目に xxxが入力されて表示できるようにアクセスする事は可能なのでしょうか？ 恐れ入りますが、ご教授お願い致します。
- ベストアンサー
- HTML
- form要素とtable要素
元はこちらです。 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1483846324 <table> <tr><td><input form="form1" type="text" value="text1"></td></tr> <tr><td><input form="form1" type="submit" value="submit1"></td></tr> <tr><td><input form="form2" type="text" value="text2"></td></tr> <tr><td><input form="form2" type="submit" value="submit2"></td></tr> </table> <form id="form1" action="cgi1.cgi" method="POST"></form> <form id="form2" action="cgi2.cgi" method="POST"></form> 上記はHTML5の仕様に従って書いていますが、これを、HTML4.01の仕様に反さないように書くと、どの様にすればいいのでしょうか。 添付画像は、実際のテーブルの様子です。
- ベストアンサー
- HTML
- 以下ソースのJavaScript部分をご教示下さい
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <script> </script> </head> <form action=""> <Table Border="1" Width="250"> <Tr> <Td ColSpan="4" Align="Center"> <B>依頼者</B> </Td> </Tr> <Tr> <Td Valign="top" Width="20%"> <input type="radio" name="irai" value="本人">本人 </Td> <Td Valign="top" Width="20%"> <input type="radio" name="irai" value="奥さま">奥様 </Td> <Td Valign="top" Width="20%"> <input type="radio" name="irai" value="お嬢さま">娘 </Td> <Td Valign="top" Width="20%"> <input type="radio" name="irai" value="ご子息さま">息子 </Td> </Tr> <Tr> <Td ColSpan="4"> <input type="radio" name="irai">その他 <input type="text" size="21" name="hoka"> </Td> </Tr> </Table> <Table Border="1" Width="250"> <Tr> <Td ColSpan="4" Align="Center"> <B>依頼者の連絡先</B> </Td> </Tr> <Tr> <Td Valign="top"> 番号：<input type="text" size="27" name="t"> </Td> </Table> <Table Border="1" Width="250"> <Tr> <Td Width="24%"> <center><input type="checkbox" name="1"> </Td><Td>日時確認</Td></Tr> </Table> <Table Border="1" Width="250"> <Tr> <Td Width="24%"> <center><input type="checkbox" name="2"> </Td><Td>依頼内容確認</Td></Tr> </Table> <textarea name="yoyaku" value="" rows="5" cols="28"> </textarea> <br> <button type="button" onclick="update(this.form);">内容反映</button> <input type="reset" value="リセット"> </form> </body> </html> 「内容反映」を押すと、テキストエリアに以下の様に吐き出され、 リセットで入力内容・テキストエリア共にリセットしたいです。 チェックボックスの２つについては、確認だけですので、 吐き出す必要はありません。 ◆反映内容◆ 依頼者：（irai選択内容が反映） 連絡先：（tに入力した内容が反映） 宜しくお願い致します。
- ベストアンサー
- JavaScript
- MFC-6983CDWのダウンロードはできたが、解凍できないトラブルについて相談しています。
- Windows10を使用しており、USBケーブルで接続しています。
- ひかり回線を利用していますが、ダウンロードしたファイルの解凍がうまくいきません。
お礼
ありがとうございました。 上手くいきました。