JavaScript PR

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

記事内に商品プロモーションを含む場合があります

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

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

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

実際の動作を確認するためのデモページは以下から確認できます。

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

まとめ

この記事では、テキストボックスのデフォルトテキストを入力時に自動クリアする方法をCSS、JavaScript、HTMLの三つの要素を使って解説しました。簡単な実装でありながら、ユーザビリティの向上に大きく寄与するこの機能は、様々なウェブサイトやアプリケーションで活用できます。

 
※流用される場合は自己責任でお願いします。
 デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。