入力を促す文字をフォームに表示するJavaScript「JQUERY.FIELDTAG.JS」

inputなどフォームのフィールドにうっすら文字を表示させておくと、ユーザーに入力を促すことが可能です。
JavaScriptライブラリのjQueryプラグイン「JQUERY.FIELDTAG.JS」を使用することで簡単に導入可能です。

使用方法

JQUERY.FIELDTAG.JSからjquery.fieldtag.jsをjQueryからjquery.jsをダウンロードします。


<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.fieldtag.js"></script>
<script type="text/javascript">
$(document).ready(function()	{
	$("#id名").fieldtag({
		markedClass: "untouched", //初期のclass名
		standardText: "Pleas enter..." //初期値の表示文字
	});
});
</script>

上記を記述後、以下のようにするとフォームに初期値を表示することができます。


<input id="id名" type="text" />

これで完成です。
またCSSで非入力と入力時のスタイルを変更することも可能です。

サンプル

Javascriptサンプルページ一覧

skuare.net