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

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

sponsors

使用方法

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で非入力と入力時のスタイルを変更することも可能です。

サンプル

sponsors

Javascriptサンプルページ一覧
skuare.net