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

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

sponsors

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

記事作成:
記事URL:

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