テキストボックスのデフォルトテキストを入力時に自動クリアする方法｜DAD UNION

ウェブデザインやウェブ開発を行う上で、ユーザビリティの観点からテキストボックスのデフォルトテキストを自動的にクリアする機能は非常に役立つものです。この記事では、その具体的な実装方法をCSS、JavaScript、HTMLの三つの要素を組み合わせて解説します。

Contents

CSSを利用してデフォルトのテキストスタイルを設定
JavaScriptを使ってテキストボックスの挙動を制御
HTMLでテキストボックスを配置
テキストボックスのデフォルトテキスト（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>

JavaScriptを使ってテキストボックスの挙動を制御

次に、jQueryを使ってテキストボックスの挙動を制御します。以下のスクリプトは、テキストボックスにフォーカスした際とフォーカスが外れた際の動作を定義しています。

まず、jQueryのライブラリを読み込みます。

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

HTMLでテキストボックスを配置

以下のHTMLコードでテキストボックスを配置します。

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