フォームの入力項目にうっすらテキストを表示するJavaScript「jQuery Watermark Plugin」

フォームなどでよく、デフォルトでテキストが表示されている場合があります。
何を入力すれば良いのかを示しことができるので、ユーザービリティ上有意義な方法です。
jQuery Watermark PluginはjQueryベースでこれが可能です。
フォームの入力項目にうっすらテキストを表示するJavaScript「jQuery Watermark Plugin」サンプル

使用方法
jQuery Watermark Pluginからjquery.updnWatermark.jsを、jQueryからjquery.jsをダウンロードします。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.updnWatermark.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$.updnWatermark.attachAll();
});
</script>

あとは表示したinputやtextareaを以下のように記述すれば完成です。
<input type="text" title="ユーザー名" />
<input type="password" title="パスワード" />
<textarea title="お問い合わせ内容を入力ください。"></textarea>

また、表示方法はCSSで調整可能です。
.updnWatermark {color: #999;font-family: Sans-Serif;font-size: small;padding: 2px;}
フォームの入力項目にうっすらテキストを表示するJavaScript「jQuery Watermark Plugin」サンプル

sponsors

「フォームの入力項目にうっすらテキストを表示するJavaScript「jQuery Watermark Plugin」」をシェアする

記事作成:
記事URL:

TOP > > > フォームの入力項目にうっすらテキストを表示するJavaScript「jQuery Watermark Plugin」