jQuery水印插件 - Watermark 和 FormWatermark

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

 

 

 

 

评论

2 楼 天梯梦 2012-09-10  

pmh905001 写道

介绍很清楚，非常感谢！

有用就好～

1 楼 pmh905001 2012-09-10  

介绍很清楚，非常感谢！