Form Watermark 是一個跨瀏覽器的可以給表單文本框和文本區域增加水印的插件，使用Form Watermark給表單增加水印提示功能，這有助于提高用戶交互和友好度，如果配合jQuery插件Validation可 提供強大的用戶體驗，Form Watermark使用簡單，效果圖如下：

?

使用說明
需要使用 jQuery庫文件 和 Form Watermark庫文件

?

?

使用實例
一，包含文件部分

?

    <script language="javascript" src="js/jquery-1.3.2.min.js"></script>
<script language="javascript" src="jquery.watermark.min.js"></script>
/* 同時可結合Validation插件(可選) */
<script language="javascript" src="js/jquery.validate.min.js"></script>

  

?

二，HTML部分

?

    <form id="frm" method="post">
	<input id="un" name="un" type="text" class="required" watermark="用戶名" />
	<input id="pwd" name="pwd" type="password" class="required lock pad" watermark="{html:'密碼 ',cls:'pad empty'}"/>
	<input type="submit" value="登陸"/>
</form>

  

?

直接使用watermark標簽就可以給文本框或文本區域增加水印效果，如上用戶名，同時也可以使用對象的形式{}，如上密碼部分使用{html:'密碼 ',cls:'pad empty'}，html表示水印文字，cls表示水印的CSS樣式。

?

詳細看附件 jquerywatermark..rar

?

?

Watermark ，同樣是一個給文本框增加水印效果的插件，實現文本框必填提示或自動時間間隔提示等，使有非常簡 單，效果圖如下：

使用說明
需要使用jQuery庫文件和Watermark庫文件
http://jquery.com/
http://plugins.jquery.com/project/jquery-watermark

?

同時需要自定義表單CSS樣式

使用實例

一，包含文件部分

?

    <script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.watermark-2.0.min.js"></script>

  

?

二，HTML部分

?

    <form id="gideon" action="" method="GET" class="cmxform">
	<h3>Watermark Demonstration </h3>
	<fieldset>
		<ol>
			<li><label for="d5-username">用戶名 <em>*</em></label> <input id="d5-username" name="d5-username" /></li>
			<li><label for="d5-password">密碼 <em>*</em></label> <input id="d5-password" name="d5-password" type="password" maxlength="10" /></li>
			<li><label></label> <input type="submit" value="提交" /></li>
		</ol>
	</fieldset>
 </form>

  

?

三，javascript部分

?

    $(function () {
$("#d5-username").watermark("biuuu.com請你需入用戶名");
$("#d5-password").watermark("biuuu.com請你需入需入你的密碼");
});

  

?

如上實例，使用jQuery插件Watermark實現自定義文本框水印提示效果，只需要指定所提示水印效果的ID，然后提供提示文字，就能實現簡單的文 本框水印效果。

?

    $("#ID").watermark("水印提示");
  

?

其它應用可以根椐具體需求進行擴展，使用 watermark 插件實現自定義文本框水印提示效果值得推薦。

下載Watermark插件源代碼
http://plugins.jquery.com/project/jquery-watermark

?

或下載附件 jquery.watermark.zip

?

?

?

?

jQuery水印插件 - Watermark 和 FormWatermark