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

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

使用方法

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サンプルページ一覧
skuare.net