仕組み

まず load 時に javascript によって以下の処理を行う。

• 指定されたクラス名を持つ要素にウォーターマーク用のスタイルを適用するために新たにクラス名を振り直す
• 対応する input 要素の位置から、ウォーターマークとして表示する要素の位置を設定する

これによってウォーターマークの表示関連を設定している。
以降は、対象 input 要素の focus 及び blur 時に以下の処理を行っている。

• focus 時に非表示にする
• blur 時に対象 input 要素の value が空（value == ''）の場合は表示する

ウォーターマークがクリックされた際に対象 input 要素へフォーカスを移す処理は、javascript ではなくlabel 要素を使用して実現している。
組込みが若干面倒臭くはなるが、JSを切った際のユーザビリティを考えると、その方が良いのかなと思う。

使い方

ZIPファイルを解凍後（中身は watermark.js と watermark.css のセット）、任意のディレクトリに配置し、本機能を実装したいhtmlでJS及びCSSファイルを読み込む。

<script type="text/javascript" src="common/js/watermark.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="common/css/watermark.css" />

本機能を使用したい要素（デモでは span 要素）に class="watermark" を指定する。
また、クラス名には対象とする input 要素の id も指定する。

※対象要素中には下記例のように必ず label 要素を含める。

<span class="watermark authId"><label for="authId">IDを入力して下さい</label></span>
<input type="text" name="authId" id="authId" size="50" value="" />