INPUTタグのselectについて

このQ&Aのポイント
  • INPUTタグによるフォーカス時の値選択について
  • 既存のフォームに一括で適用する方法はあるか
  • フォームの値選択を効率化する方法
回答を見る
  • ベストアンサー

INPUTタグのselectについて

INPUTタグのselectについて いつもお世話になりますm(__)m <input type="text" name="hoge" onfocus="this.select()"> 上記のようにすると、フォーカスされた時に、入力されている値が選択状態になりますが、これをフォーム上の全てのINPUTとTEXTAREAに適用できるような方法はありませんでしょうか? 既に作成済みのフォーム(HTML)に一つずつ「onfocus="this.select()"」を入れるのは、非常に手間がかかります。 一気にスタイルシート等で設定できればと思い、質問させて頂きました。 ご存じのかた、ご教授頂けますようお願い致しますm(__)m

  • HTML
  • 回答数1
  • ありがとう数3

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

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

よくわからないけど、こういうことかなぁ? window.onload = function() { var i, j, e, el, f = document.getElementsByTagName('FORM'); for (i=0; i<f.length;) { el = f[i++].elements, j=0; while (e = el[j++]) { if ((e.nodeName == 'INPUT' && e.type == 'text') || e.nodeName == 'TEXTAREA') e.onfocus = function() { this.select(); } } } } ちゃんとやるなら、addEventListenerなどを利用するとか…

関連するQ&A

  • inputとtextareaに

    今、フォーム部品に以下のような指定をしています。 <input type="text" value="デフォルト値" onfocus="if(this.value==this.defaultValue)this.value = ''" onblur="if(this.value=='') this.value=this.defaultValue"> このonfocus以降の指定をinput type="text"とtextareaのみに自動で追加しようとしているのですが、調べてもよくわからなかったため質問することにしました。 このような指定はjavascriptでできますか?

  • selectでinputの表示を変えたい

    セレクトを選択した時に、inputの一部をdisabledにし、同時にinputの背景色を変更したいと思っています。 ----------------------------------------------------------------------- 現在はこんな感じです。 function menuLink(linkLoc) { if(linkLoc !="") { ifrm.location.href=linkLoc;} } --- セレクト1 <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> セレクト2 <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> セレクト3 <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> ----------------------------------------------------------------------- セレクト1のどれかを選択した時に、インプットのaa,ba,da,eaをdisabledにし、同時にaa,ba,da,eaの背景色を変更 セレクト2のどれかを選択した時に、インプットのab,bb,db,ebをdisabledにし、同時にab,bb,db,ebの背景色を変更 という感じにしたいのですが、可能でしょうか? 可能であれば書き方を教えていただけると助かります。 よろしくおねがいします。

  • select boxとinput valuの連動

    どなたか教えてください。 変な質問の仕方で申し訳ありません。 <select> <option value="hoge1">a1,b1,c1</option> <option value="hoge2">a2,b2,c2</option> <option value="hoge2">a3,b3,c3</option> </select> これはhoge1をセレクトするとa1,b1,c1となりますが、 これをhoge1をセレクトするとinput hoge2、input hoge3、が連動して 値b1,c1を表すような事をしたいのですが。(下記) <select><option value="hoge1">a1</option></select>をセレクトすると <input type="text" name="hoge2" >value値に=b1が入る <input type="text" name="hoge3" > value値に=c1が入る どうすれば動くのか分かりません 初心者なので具体的に教えていただければ幸いです。 何か簡単な方法はないでしょうか? どうぞよろしくお願い致します。

    • ベストアンサー
    • HTML
  • こういう事は可能ですか?

    お聞きしたい事があるのですが、 textareaのテキスト系のタグの中に、クリックをすると「全て選択」状態になる onclick="this.focus()" onfocus="this.select() のタグを挿入したいのですが、 そのページにある、全てのテキストエリアにたいして、 一つずつ、埋め込むのではなく、 スタイルシートなどで、一気にする事はできないでしょうか? わかる方がいましたら、ぜひ教えてください。 また、クリックした時の色を変えることは可能でしょうか? こちらの方もよろしくお願いします。

    • ベストアンサー
    • HTML
  • Enterで指定のテキストボックスにフォーカスを・・・

    Enterを押すと指定のテキストボックスにフォーカスを移動させたいのですがやり方がわかりません・・・。 例えば以下の様なフォームで TB1→TB2→TB3→TB5→TB6 という具合に移動させたいです。 どうか皆さんのお知恵をお貸しください。 <form name = "textbox"> <input type = "text" name="TB0" onFocus="this.blur()"> <input type = "text" name="TB1"> <input type = "text" name="TB2"> <input type = "text" name="TB3"><br> <input type = "text" name="TB4"onFocus="this.blur()"> <input type = "text" name="TB5"> <input type = "text" name="TB6"> </form>

  • テキスト・セレクトフォームにて何も入力されていない状態ではフォームの色を変えるためには

     Rubyを使用して掲示板のシステムを作成しています。 必須項目 <input type="text" name="textfield"><br> 任意項目 <input type="text" name="textfield2"><br> 必須項目 <input type="text" name="textfield3"><br> 必須項目 <textarea name="textarea"></textarea><br> 必須項目 <select name="select"></select> と複数のテキストフォームとセレクトフォームがあり,その一部が必須項目です。そこで必須項目と分かるようにフォームの入力部分を赤く塗り,何か文字が入力されたら(何か選ばれたら),元の白の状態にしたいと考えています。  このようなことは実際可能なので使用か。ご教授お願いします。

    • ベストアンサー
    • HTML
  • VB.NETで<Input>タグ、<textarea>タグに値を代入するには?

    VB.NET+Javascriptでプログラミングしているのですが、HTMLに<input>タグ(type=text)、<textarea>タグがありまして、これに値を代入する方法がわかりません。 おしえてくださいーー ※該当タグにJavascriptを使うので、VBのテキストボックスはつかえません><

  • IE限定可 <tr>~</tr>タグの上げ下げ方法は?

    <FORM id=formid name=frm action=#> <table> <tr onclick=chCell(this) onFocus=chCell(this)> <td style=CURSOR:hand>cell 1</td> <td style=CURSOR:hand>hoge</td> </tr> <tr onclick=chCell(this) onFocus=chCell(this)> <td style=CURSOR:hand>cell 2</td> <td style=CURSOR:hand>hoge</td> </tr> <tr onclick=chCell(this) onFocus=chCell(this)> <td style=CURSOR:hand>cell 3</td> <td style=CURSOR:hand>hoge</td> </tr> <table> <input type="button" value="項目を上げる"> <input type="button" value="項目を下げる"> </form> 上記のようなフォームで以下の事が実装したいのですがどなたかご教授頂けませんでしょうか。 ・ 項目(行)をクリックすると色が変わる ← (実装済み) ・ 行を指定して「項目を上げる」をクリックすると上へ上がる ・ 行を指定して「項目を下げる」をクリックすると下へ上がる ・ 矢印キーでフォーカスの上下移動 何卒お願い申し上げます。

  • Selectボックスの一覧表示方法

    Selectボックスの一覧表示方法 いつもお世話になりますm(__)m <input type='text' name='hoge1'> <select name='hoge2'> <option value='1'>Aあああ</option> <option value='2'>Bいいい</option> <option value='3'>Cううう</option> </select> 上記のフォームがあった場合、hoge1を入力して、TABキーでhoge2のSelectボックスにフォーカスが移動した時、hoge2の一覧を表示させたいのですが、可能でしょうか? hoge2にフォーカスがある時に、キーボードのALT+↓を押した時と同じ動作を自動でしたいと思っています。 ※Accessでいうところの、xx.Dropdownと同じです いろいろ調べたところ、「onfocus="this.size=5"」でSelectボックス自体のサイズを変更して表示する方法は見つかりました。 しかし、上記のようにSelectボックス自体のサイズを変更せず、まさにALT+↓を押した状態(一覧が表示される状態)にしたいと考えています。 javascriptのonfocusで出来そうな気がするのですが、お詳しい方、是非ともお力添え下さい。 宜しくお願い致します。

  • フォームに入力した値の制御について

    フォームに入力した値の制御について いろいろと調べてみたのですが、 どうすれば良いか分からないので、 質問をさせて頂きました。 【概要】 フォームの[text]と[textarea]に入力をしてもらいたい 入力値のサンプルを表示されるようにしました。 カーソルを[text]と[textarea]に入れると、 入力値のサンプルの表示が消えて入力出来るようにしました。 【やりたい事】 [text]と[textarea]に入力をしてもらった値を、 最終的にtextareaに出力させるようになっています。 何も入力せず出力をさせると、サンプル値は出力されてしまいます。 [text]と[textarea]に入力をした値のみ出力させることは可能でしょうか。 ご教授頂ければと思います。 よろしくお願いいたします。 【ソース】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN Frameset" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <script type="text/javascript"> <!--ログ生成スクリプトを取得--> function textoutput(formObj) { <!--text01を取得--> var text01 = formObj.elements["text01"].value; <!--text02を取得--> var text02 = formObj.elements["text02"].value; <!--textarea01を取得--> var textarea01 = formObj.elements["textarea01"].value; <!--textarea02を取得--> var textarea02 = formObj.elements["textarea02"].value; <!--出力データを作成--> var text = ''; <!--text3データを作成--> if(text01!==""){ text += '質問1:' + '\n'+ text01 + '\n'; } <!--text2データを作成--> if(text02!==""){ text += '質問2:' + '\n'+ text02 + '\n'; } <!--textarea01データを作成--> if(textarea01!==""){ text += '質問3:' + '\n'+ textarea01 + '\n'; } <!--textarea02データを作成--> if(textarea02!==""){ text += '質問4:' + '\n'+ textarea02 + '\n'; } <!--出力データを作成--> formObj.elements["output"].value=text; } </script> </head> <body> <form name="form01"> <strong>・諮問1:</strong><br> <input type="text" name="text01" value="1入力してください" id="p1" size="30" class="disabled" onfocus="if (this.value == defaultValue) this.value = '';" onblur="if (!this.value) this.value = defaultValue;"><br> <strong>・諮問2:</strong><br> <input type="text" name="text02" value="2入力してください" id="p2" size="30" class="disabled" onfocus="if (this.value == defaultValue) this.value = '';" onblur="if (!this.value) this.value = defaultValue;"><br> <strong>・諮問3:</strong><br> <textarea name="textarea01" id="textarea01" cols="60" rows="5" onfocus="if(this.value == this.defaultValue) this.value=''" onblur="if(this.value == '') this.value=this.defaultValue"> 3入力してください </textarea><br> <strong>・諮問4:</strong><br> <textarea name="textarea02" id="textarea02" cols="60" rows="5" onfocus="if(this.value == this.defaultValue) this.value=''" onblur="if(this.value == '') this.value=this.defaultValue"> 4入力してください </textarea><br> <strong>・出力結果:</strong><br> <input type="button" value="ログ出力" onClick="textoutput(this.form);">&nbsp;<br> <textarea cols=60 rows=20 name="output" ></textarea> </form> </body> </html>

専門家に質問してみよう