- ベストアンサー
テキスト・セレクトフォームにて何も入力されていない状態ではフォームの色を変えるためには
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> と複数のテキストフォームとセレクトフォームがあり，その一部が必須項目です。そこで必須項目と分かるようにフォームの入力部分を赤く塗り，何か文字が入力されたら（何か選ばれたら），元の白の状態にしたいと考えています。 このようなことは実際可能なので使用か。ご教授お願いします。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんな感じでどうでしょうか？ <style> <!-- .must { background-color:pink;border-color:red; } //--> </style> <script type="text/javascript"> <!-- function change(f){ f.style.backgroundColor="white"; } //--> </script> </head> <body> <input class="must" type="text" name="textfield" onkeypress="change(this)"><br> <input type="text" name="textfield2"><br> <input class="must" type="text" name="textfield3" onkeypress="change(this)"><br> <textarea name="textarea"></textarea><br> <select class="must" name="select" onchange="change(this)"></select> </body>
その他の回答 (1)
- taka451213
- ベストアンサー率47% (436/922)
こんにちは。 No1さんのソースをお借りして、ちょっと変えてみました・・・。 （No1さん、感謝です） <style> <!-- .must { background-color:pink;border-color:red; } //--> </style> <script type="text/javascript"> <!-- function change(f){ //alert(f.value); if(f.value!=""){ f.style.backgroundColor="white"; }else{ f.style.backgroundColor="pink"; } } //--> </script> </head> <body> <input class="must" type="text" name="textfield" onblur="change(this)"><br> <input type="text" name="textfield2"><br> <input class="must" type="text" name="textfield3" onblur="change(this)"><br> <textarea name="textarea"></textarea><br> <select class="must" name="select" onchange="change(this)"></select> </body> イベントを「onblur」にして、ロジックに「if」で色を変えるように追加しました。 (^^ゞ
お礼
ご教授ありがとうございます。そうです。この通りです。 もう少し欲張りをいいますと，入力した後にまた消すと，また赤くなるということはできるのでしょうか。（このソースだと，キータイプすると変わるようになっていますね）