みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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 += '質問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" 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>

投稿日時 - 2012-07-18 22:47:24

QNo.7598177

困ってます

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

ちょっと 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="1入力してください" 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">3入力してください</textarea>

 <p>
  <label>・諮問4:</label><br>
  <textarea name="textarea02" cols="60" rows="5" class="none">4入力してください</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>

投稿日時 - 2012-07-19 08:25:19

お礼

ご連絡が遅くなり申し訳ありません。
アドバイスありがとうございました。
大変助かりました。

投稿日時 - 2012-07-21 16:42:57

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問