skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

入力を促す文字をフォームに表示する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「JQUERY.FIELDTAG.JS」サンプル

記事作成：2009年06月23日

前の記事：iPhoneライクにスクロールさせるJavaScript「OverScroll」
次の記事：jQueryでメニューをわかりやすくする「Side Navigation Tooltip / Popup Bubble」