テキストボックスのデフォルトテキスト（VALU値）を入力時にクリアさせる方法 DAD UNION

JavaScriptの記述が簡単そうだったので、テキストボックスのデフォルトテキスト（VALU値）を入力時にクリアさせる方法をご紹介します。

Contents

テキストボックスのデフォルトテキスト（VALU値）を入力時にクリアさせるCSSの記述
テキストボックスのデフォルトテキスト（VALU値）を入力時にクリアさせるJavaScriptの記述
テキストボックスのデフォルトテキスト（VALU値）を入力時にクリアさせHTMLの記述
テキストボックスのデフォルトテキスト（VALU値）を入力時にクリアさせる方法デモページ

テキストボックスのデフォルトテキスト（VALU値）を入力時にクリアさせるCSSの記述

※テキストボックス（.clText）のデフォルト入力文字色をグレー（#999999）に設定します。必要に応じて変更して下さい。

<style type="text/css">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:2.0em;
	text-align:center;
	padding:15px 0;
}
#idWrap{
	width:600px;
	margin:0 auto;
	text-align:center;
}
#idText{
	text-align:center;
}
.clText{
	color:#999999;
}
-->
</style>

テキストボックスのデフォルトテキスト（VALU値）を入力時にクリアさせるJavaScriptの記述

※jquery.min.jsファイルを読み込みます。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

※テキストボックス（.clText）にフォーカスするとテキストボックスのVALU値を空にし入力文字色を黒（#000000）にします。フォーカスを失ったタイミングで文字が未入力の場合、VALU値に「テキストを入力」を設定し文字色をグレー（#999999）に変更します。

<script type="text/javascript">
$(function(){
     $(".clText").focus(function(){
          if(this.value == "テキストを入力"){
               $(this).val("").css("color","#000000");
          }
     });
     $(".clText").blur(function(){
          if(this.value == ""){
               $(this).val("テキストを入力").css("color","#999999");
          }
     });
});
</script>

テキストボックスのデフォルトテキスト（VALU値）を入力時にクリアさせHTMLの記述

※テキストボックス（class=”clText”）を用意します。必要に応じて変更して下さい。

<div id="idWrap">
    <h1>下のテキストボックス入力時にデフォルト表示のテキストがクリア（非表示）されます。</h1>
    
    <div id="idText">
    <input type="text" class="clText" value="テキストを入力" />
    </div>
    
</div><!--/idWrap-->