テキストボックスのデフォルトテキスト(VALU値)を入力時にクリアさせる方法 part2



過去に
テキストボックスのデフォルトテキスト(VALU値)を入力時にクリアさせる方法
をご紹介しましたが(jQuery未使用)、今回の方がJavaScriptの記述が
簡単そうだったのでpart2(jQueryを使用)をご紹介します。

1.読み込むJs

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

2.CSSの記述例

<style type="text/css">
<!--
.clText{
	color:#999999;
}
-->
</style>

3.JavaScriptの記述例

<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>

4.HTMLの記述例

    <input type="text" class="clText" value="テキストを入力" />

テキストボックスのデフォルトテキスト(VALU値)を入力時にクリアさせる方法デモページ パート2

過去に掲載のデモページは
テキストボックスのデフォルトテキストを入力時にクリアさせるデモ
です。

簡単なことですが、今後ちょこちょこ使えそうな気がします。