textとtextareaの書式に設定について
- textとtextareaの書式の設定制御の方法について質問します。
- textやtextareaの初期値のテキスト色とバックグランドの色を、指定した書式に設定したいと思っています。
- 初期値が入っている場合と入力した値が入っている場合で、異なる色と背景を設定したいです。
- ベストアンサー
textとtextareaの書式に設定について
先日、質問をさせて頂きました者になります。 input textとtextareaの書式の設定制御の方法が、 分からなくなってしまい質問をさせて頂きました。 【やりたい事】 textやtextareaの初期値のテキスト色とバックグランの色を、 textやtextareaに初期値が入っている時と入力した値が入っている時に、 指定した書式に各種設定したいと思っています。 具体的には、textや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を取得--> if((text01 = formObj.elements["text01"].value)==formObj.elements["text01"].defaultValue)text01=""; <!--text02を取得--> if((text02 = formObj.elements["text02"].value)==formObj.elements["text02"].defaultValue)text02=""; <!--textarea01を取得--> if((textarea01 = formObj.elements["textarea01"].value)==formObj.elements["textarea01"].defaultValue)textarea01=""; <!--textarea02を取得--> if((textarea02 = formObj.elements["textarea02"].value)==formObj.elements["textarea02"].defaultValue)textarea02=""; <!--出力データを作成--> var text = ''; <!--text3データを作成--> if(text01!==""){ text += '質問1：' + '\n'+ text01 + '\n'; } <!--text2データを作成--> if(text02!==""){ text += '質問２：' + '\n'+ text02 + '\n'; } <!--textarea01データを作成--> if(textarea01!==""){ text += '質問３：' + '\n'+ textarea01 + '\n'; } <!--textarea02データを作成--> if(textarea02!==""){ text += '質問４：' + '\n'+ textarea02 + '\n'; } <!--出力データを作成--> formObj.elements["output"].value=text; } </script> </head> <body> <form name="form01"> <strong>・諮問１：</strong><br> <input type="text" name="text01" value="１入力してください" 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"> ３入力してください </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"> ４入力してください </textarea><br> <strong>・出力結果：</strong><br> <input type="button" value="ログ出力" onClick="textoutput(this.form);"> <br> <textarea cols=60 rows=20 name="output" id="output"></textarea><br> <textarea id="text" cols="30" rows="5" wrap="soft"></textarea><br> <button onclick="save();">save</button><a id="anchor" href=""></a> </form> </body> </html>
- yumi007
- お礼率70% (12/17)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
ちょっと ie が てもとに ないので うごくのか ふめい。 たぐの なかに すくりぷとが あると、みづらくないですか？（ひらがなより） ぜんかくくうはくは、はんかくに してね。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <title>値が初期値なら、色を変えたいだとか</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> input, textarea { color : black; background : white; } input.none, textarea.none { color : gray; background : pink; } input.focus, textarea.focus { color : #00f; border : 2px #00f inset; background : #eef; } </style> </head> <body> <form action="#"> <p> <label>・諮問1：</label><br> <input type="text" name="text01" value="１入力してください" size="30" class="none"> <p> <label>・諮問2：</label><br> <input type="text" name="text02" value="2入力してください" size="30" class="none"> <p> <label>・諮問3：</label><br> <textarea name="textarea01" cols="60" rows="5" class="none">３入力してください</textarea> <p> <label>・諮問4：</label><br> <textarea name="textarea02" cols="60" rows="5" class="none">４入力してください</textarea> <p> <label>・出力結果：</label><br> <input type="button" value="ログ出力"> <p> <textarea cols=60 rows=20 name="output" id="output"></textarea><br> <textarea id="text" cols="30" rows="5"></textarea><br> </form> <script type="text/javascript"> //@cc_on @set @mode = (@_jscript_version < 9); function delClass (e, name) { var reg = new RegExp ('(^|\\s+)(' + name + ')(\\s+|$)'); e.className = e.className.replace (reg, ''); } function addClass (e, name) { delClass (e, name); e.className += (e.className ? ' ': '') + name; } function isTarget (e) { var t = e.tagName; return (t === 'TEXTAREA') || ('INPUT' === t && 'text' === e.type);//&&だから… } var Handler = function (event) { var e = event./*@if (@mode) srcElement @else@*/ target /*@end@*/; var d = e.ownerDocument; if ('output' === e.name) { return; } switch (event.type) { case 'click': if ('button' == e.type) { if ('ログ出力' == e.value) { textoutput (); } } break; case 'focusin': case 'focus' : if (isTarget (e)) { if (e.value == e.defaultValue) { e.value = ''; } addClass (e, 'focus'); } break; case 'focusout' : case 'blur' : if (isTarget (e)) { if ('' == e.value) { e.value = e.defaultValue; addClass (e, 'none'); } if (e.value != e.defaultValue) { delClass (e, 'none'); } delClass (e, 'focus'); } } }; document./*@if(@mode) attachEvent ('on'+ @else@*/ addEventListener (/*@end@*/ 'click', Handler, false); document./*@if(@mode) attachEvent('onfocusin' @else@*/ addEventListener('focus' /*@end@*/, Handler, true); document./*@if(@mode) attachEvent('onfocusout' @else@*/ addEventListener('blur' /*@end@*/, Handler, true); </script> </body> </html>
関連するQ&A
- フォームに入力した値の制御について
フォームに入力した値の制御について いろいろと調べてみたのですが、 どうすれば良いか分からないので、 質問をさせて頂きました。 【概要】 フォームの[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 += '質問２：' + '\n'+ text02 + '\n'; } <!--textarea01データを作成--> if(textarea01!==""){ text += '質問３：' + '\n'+ textarea01 + '\n'; } <!--textarea02データを作成--> if(textarea02!==""){ text += '質問４：' + '\n'+ textarea02 + '\n'; } <!--出力データを作成--> formObj.elements["output"].value=text; } </script> </head> <body> <form name="form01"> <strong>・諮問１：</strong><br> <input type="text" name="text01" value="１入力してください" 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"> ３入力してください </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"> ４入力してください </textarea><br> <strong>・出力結果：</strong><br> <input type="button" value="ログ出力" onClick="textoutput(this.form);"> <br> <textarea cols=60 rows=20 name="output" ></textarea> </form> </body> </html>
- ベストアンサー
- JavaScript
- 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でできますか？
- ベストアンサー
- JavaScript
- フォームの制御について
下記２つのJavaScriptについて正しい記述方法について、 どうすれば良いかを模索しています。 アドバイスを頂ければ幸いです。 どうぞ何卒よろしくお願い致します。 1.チェックボックスの値とテキストフォームの値を結合する方法 <!-- C02の中から選択されているものを取得// --> for ( var i = 0; i < checkbox02.length; i ++ ) { if ( checkbox02[i].checked === true ) { text += checkbox02[i] + text01. value; text += '\n';}} 2.テキストエリアの値がNullの時に値が出力されないようにする方法 <!-- textarea01の中から選択されているものを取得// --> text += '回答3：' + textarea01 + '\n'; ソース： ----------------------------------------------------------------------------------------- <head> <title>アンケートフォーム</title> <script type="text/javascript"> <!-- 値の加工用// --> function textoutput() { <!-- フォームを変数に// --> var formObj = document.form01; <!-- checkbox01を取得// --> var checkbox01 = formObj.C01; <!-- checkbox02を取得// --> var checkbox02 = formObj.C02; <!-- text01.valueを取得// --> var text01 = formObj.text01.value; <!-- textarea01.valueを取得// --> var textarea01 = formObj.textarea01.value; <!-- textを結合用の変数として準備// --> <!-- チェックボックスの中から選択されているものを取得// --> var text = 'アンケート結果' + '\n'; <!-- C01の中から選択されているものを取得// --> for ( var i = 0; i < checkbox01.length; i ++ ) { if ( checkbox01[i].checked === true ) { text += checkbox01[i]. value; text += '\n';}} <!-- C02の中から選択されているものを取得// --> for ( var i = 0; i < checkbox02.length; i ++ ) { if ( checkbox02[i].checked === true ) { text += checkbox02[i] + text01. value; text += '\n';}} <!-- textarea01の中から選択されているものを取得// --> text += '回答3：' + textarea01 + '\n'; <!-- output.valueにtextを反映(最後に改行コード)// formObj.output.value = text + '\n'; } </script> </head> <body> <strong>アンケートフォーム</strong><br /><br /> <form name="form01"> <!--チェックボックスC01// --> <strong>・回答結果</strong><br /> <table border="0" > <td colspan="2" valign="middle"width="560"> <input type="checkbox" name="C01" value=" →回答1" id="checkbox 1-1" > <label for="checkbox 1-1">回答1</label> <input type="checkbox" name="C01" value=" →回答2" id="checkbox 1-2" > <label for="checkbox 1-2">回答2</label> </td> <tr> <!--チェックボックスC02// --> <td width="86" valign="middle"> <input type="checkbox" name="C02" value=" →その他：" id="checkbox 1-1" > <label for="checkbox 1-1">その他：</label> </td> <td valign="middle"> <input type="text "name="text01" size="60" /><br> </td> </table> <strong>・回答3：</strong><br /> <textarea name="textarea01" cols="60" rows="1" " tabindex="1" STYLE="ime-mode:active"></textarea><br> <!--結果出力// --> 結果出力<br> <input type="button" value="ログ出力" onClick="textoutput();"> <input type="reset" value="リセット" onclick="return confirm('リセットボタンがクリックされました。本当に入力内容を削除してもよろしいですか？');" /><br> <input type="button" name="Copy" value="クリップボードにコピー" onClick="CopyText('output');"><br> <textarea name="output" id="output" cols="60" rows="10"></textarea><br> </form> </body> </html>
- ベストアンサー
- JavaScript
- フレーム内のJavaスクリプトの制御方法について
textとtextareaフォームに文字を入力する際の制御について どのようにすれば良いかご教授頂けばと思います 【やりたい事】 textとtextareaに文字を入力するときに、 「ime-mode: disabled」を使いIMEを直接制御し、 コピー＆貼付け対策のため「JavaScript」で、 全角より半角に自動変換されるように制御しました。 下記のソースをhtmlファイルに記述しています。 しかしながら、フレーム内に該当htmlファイルを設定すると、 「ime-mode: disabled」と「JavaScript」で制御している 全角から半角へ自動変換が機能しなくなります。 動作環境は、IE7 ～ IE9を想定しています。 サンプルファイルを下記にアップしました。 https://box.yahoo.co.jp/guest/viewer?sid=box-l-uuwbyy42v2bpqxq7lxcoosuyni-1001&uniqid=65c3cea9-7cd0-4b71-bc86-3213de26599e 出来るだけシンプルな方法で解決策があればご教授をお願いいたします。 【ソース】 ・text： <input type="text" name="text01" value="1入力してください" size="60" style="width:450px;" style="ime-mode: disabled;" onkeyup="chkCode(this);" onfocus="if (this.value == defaultValue) this.value = '';" onblur="if (!this.value) this.value = defaultValue;"> ・textarea： <textarea name="textarea01" id="textarea01" cols="60" rows="5" style="ime-mode: active;" onfocus="if(this.value == this.defaultValue) this.value=''" onblur="if(this.value == '') this.value=this.defaultValue"> ・JavaScrpt： function chkCode(id) { work=''; for (lp=0;lp<id.value.length;lp++) { s=id.value[lp] s={"ー":"-","＠":"@","＿":"_","／":"/","￥":"?","＆":"&","％":"%"}[s]||s unicode=s.charCodeAt(0); if ((0xff0f<unicode) && (unicode<0xff1a)) { work+=String.fromCharCode(unicode-0xfee0); } else if ((0xff20<unicode) && (unicode<0xff3b)) { work+=String.fromCharCode(unicode-0xfee0); } else if ((0xff40<unicode) && (unicode<0xff5b)) { work+=String.fromCharCode(unicode-0xfee0); } else { work+=String.fromCharCode(unicode); } } id.value=work; }
- 締切済み
- JavaScript
- クリックすると表示されていた説明文が非表示になる設定
フォームの作成の件で不明な点があるのでどなたかご指導お願いします。 やりたいことは、 テキストフィールドにページ読み込み時は説明文を表示しておいて、 そのフィールドがクリックされると説明文が非表示になり、入力が出来る。 という事をやりたいんですが、 ある雑誌に<textarea>～</textarea>でのやり方が書いてあったのですが、 <input～>でやろうと思ったら出来ませんでした。下のタグでやってみました。 最初に表示しておきたい説明文は「※半角で入力」です。 <input name="message" type="text" class="textbox"id="message" onFocus="if(this.value=='※半角で入力')this.value='';"onBlur="if(this.value=='')this.value='※半角で入力';" value="※半角で入力" size="20" maxlength="10"> 宜しくお願いします。
- ベストアンサー
- JavaScript
- オブジェクトから値を取得する方法について
QNo.7391687 の続きで質問をもうひとつお願い致します。 いろいろと調べたり、試行錯誤しながら、 erlectオブジェクトの値を取得して、 取得した値の出力をしたいと考えています。 ご教授頂ければ幸いです。 どうぞよろしくお願いいたします。 【ソース】 ------------------------------------------------------- <head> <title>問合せ入力フォーム</title> <script type="text/javascript"> function textoutput() { <!-- フォームを変数に// --> var formObj = document.form01; <!-- selectを取得// --> var select01 = formObj. select01; <!-- textを結合用の変数として準備// --> var text = '【select01】' + '\n'; text += select01 + '\n'; <!-- output.valueにtextを反映(最後に改行コード)// --> formObj.output.value = text + '\n'; } </script> </head> <body> <form name="form01"> <!--セレクトボタン// --> <strong>・OS確認</strong><br /> <select name="select01"> <option value=""> <option value="Windows7">Windows7 <option value="WindowsVista">WindowsVista <option value="WindowsXP">WindowsXP <option value="WindowsMe">WindowsMe <option value="Windows2000">Windows2000 </select> <br> <!--ログ出力// --> ログ出力<br> <input type="button" value="ログ出力" onClick="textoutput();"><br> <textarea name="output" cols="60" rows="10"></textarea><br> </form> </body> </html>
- ベストアンサー
- JavaScript
- チェックボックスの値取得後の加工について
下記のJavaScriptをどうように修正をすれば良いか、 ご教授いただければと思い投稿させて頂きました。 どうぞよろしくお願い申し上げます。 出力ボタンをクリックすると現状では下記のようになります。 【現状】 ------------------------------------------------------ アンケート結果 →回答1 →回答2 希望としては取得した値を下記のように加工をして出力したいと思います。 【希望】 ------------------------------------------------------ アンケート結果 →回答1、回答2 【ソース】 ------------------------------------------------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN Frameset" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <script> function textoutput(formObj) { var checkbox01 = formObj.elements["C01"]; var text = 'アンケート結果' + '\n'; for ( var i = 0; i < checkbox01.length; i ++ ) { if ( checkbox01[i].checked === true ) { text += checkbox01[i].value; text += '\n'; } } formObj.elements["output"].value=text; } </script> </head> <body> <form name="form01"> <strong>・回答結果</strong><br> <table border="0"> <td colspan="2" valign="middle" width="560"> <input type="checkbox" name="C01" value=" →回答1" id="checkbox1-1"> <label for="checkbox1-1">回答1</label> <input type="checkbox" name="C01" value=" →回答2" id="checkbox1-2"> <label for="checkbox1-2">回答2</label> </td> <table> 結果出力<br> <input type="button" value="ログ出力" onClick="textoutput(this.form);"><br> <textarea name="output" id="output" cols="60" rows="10"></textarea><br> </form> </body> </html>
- ベストアンサー
- JavaScript
- textarea内を書き換えたいんです。
textarea内のvalueを書き換えたいんですが、下記のような形だとだめなんでしょうか。 <textarea name="text_name[0]"></textarea> <textarea name="text_name[1]"></textarea> <textarea name="text_name[2]"></textarea> document.enq_form.text_name[1].value = "テキスト"; 現状では、text_name[1]がundefinedになってしまいます。 ご教授お願いいたします。
- ベストアンサー
- JavaScript
- テキストエリアにvalue以外で文字列
<input id="name" name="name" type="text" value="name" onblur="if(this.value == '') this.value='name';" onfocus="if(this.value == 'name') this.value='';" /> フォームにnameという文字列が表示されていてクリックすると文字列が消える。フォーカスを外すと再びnameが表示される。 それだけならば上記のコードで問題ないんですが、フォームに何も入力せず投稿ボタンを押すと、内容が「name」のまま投稿されてしまいます。 何か解決する良いアイデアはないでしょうか。 どうかよろしくお願いします。
- ベストアンサー
- HTML
- cgi：textareaでの改行を<br>に
perlでcgiを作成しています。 <textarea>などで投稿されたテキストの改行文字を<br>に変換するために、 $value =~ s/\r\n/<br>/g; $value =~ s/\r/<br>/g; $value =~ s/\n/<br>/g; のように処理していました。が、<textarea>内で最後に何度もenterを押す人がいて、結果、 hoge<br>hoge<br><br><br><br><br><br><br> のようになってしまいます。 hoge<br>hoge のようにしたいのですが、パターンマッチをあまり勉強していないので、 よくわかりせん。 よろしくお願いします。
- ベストアンサー
- Perl
お礼
ご連絡が遅くなり申し訳ありません。 アドバイスありがとうございました。 大変助かりました。