jQuery插件FormWatermark实现给表单文本框与文本区域增加水印提示功能

jQuery插件Form Watermark是一个跨浏览器的可以给表单文本框和文本区域增加水印的插件，使用Form Watermark给表单增加水印提示功能，这有助于提高用户交互和友好度，如果配合jQuery插件Validation可提供强大的用户体验，Form Watermark使用简单，效果图如下：

使用说明
需要使用jQuery1.2.6+库文件和Form Watermark库文件

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

1. <script language=”javascript” src=”js/jquery-1.2.6.js”></script>
2. <script language=”javascript” src=”js/jquery.watermark.packed.js”></script>

同时可结合Validation插件(可选)

1. <script language=”javascript” src=”js/jquery.validate.js”></script>

自定义CSS样式(实例)

1. <style>
2. .lock { background:url(‘img/encrypted.gif’) no-repeat; }
3. .pad { padding-left:25px; }
4. .empty { color:#ccc; }
5. .isgreen { color:green; }
6. </style>

二，HTML部分

1. <form id=”frm” method=”post”>
2. <input id=”un” name=”un” type=”text” class=”required” watermark=”用户名” />
3. <input id=”pwd” name=”pwd” type=”password” class=”required lock pad” watermark=”{html:’密码’,cls:’pad empty’}”/>
4. <input type=”submit” value=”登陆”/>
5. </form>

直接使用watermark标签就可以给文本框或文本区域增加水印效果，如上用户名，同时也可以使用对象的形式{}，如上密码部分使用{html:’密码’,cls:’pad empty’}，html表示水印文字，cls表示水印的CSS样式。

三，其它使用实例

1，如果文本框或文本区域中不使用watermark标签，可使用如下方法

(1)html部分：

1. <input type=”text” id=”wm2” />

(2)javascript部分：

1. $(“#wm2“).watermark({html:”Some watermark”});

使用watermark函数给ID为wm2的文本框增加水印

2，支持手动增加或取消水印功能
(1)html部分：

1. <input type=”text” id=”wm3″ />

(2)javascript部分：

1. 增加：$(‘#wm3′).watermark(‘Watermark added’);
2. 取消：$(‘#wm3′).watermark({remove:true});

3，在表单文本框或文本区域提示文字上继续增加文本，水印不消除

1. <input type=”text” value=”http://www.biuuu.com/?p=” watermark=”Add text here” />

4，给水印文本直接增加样式

1. <input type=”text” watermark=”{html:’With style…’,css:{color:’blue’}}”/>

给文本框水印增加蓝色样式css:{color:’blue’}

5，给水印文本框增加CSS样式

1. <input type=”text” watermark=”{html:’With class…’,cls:’isgreen’}”/>

给水印增加CSS样式

6，给文本区域增加水印

1. <textarea watermark=”增加文本区域水印…”></textarea>

7，继承style样式

1. <input style=”color:blue;font-weight:bold;” type=”text” watermark=”{html:’Inheriting color’,inherit:’color’}”/>

8，其它，另外两个全局方法
清除所有水印

1. $.clearwatermarks()

恢复所用水印

1. $.addwatermarks()

如上实例，使用Form Watermark表单只需要直接指定水印文本即可，因此使用非常简单，值得推荐。

点我查看jQuery插件Form Watermark在线演示

Popularity: 1% [?]