文本框/域文字提示自动显示隐藏jQuery小插件

本文地址：http://www.zhangxinxu.com/wordpress/?p=854

一、生孩子的理由

对于“意外怀孕”这样的事我是绝对不会做的，所以，写此算不上插件的（很鸡毛蒜皮的功能）的插件是有缘由的。设计师设计的了一个有很多数据提交的页面，显然，会有很多的表单，显然会有很多的提示，像是“老湿，你只能输入5个字”，或是“请输入你的真实姓名”，这非常的常见，“擦擦擦”（拟声词，用以形容我以极快的速度打开几个网页），结果……见下图：

嘿嘿，想必上图大家都认识，淘宝首页的搜索框，再随便打开一个网站，恩……比如说flickr，结果，嘿！果不其然，见下图：

ok，很多时候这类信息提示是用在搜索上的，当然，也不绝对。比如今天我白天写的页面，提示甚多，且直接以淡灰色写在的表单控件内。如果网站只有一两个这类提示，我甚至可以直接写在HTML页面上，当然，我是不推荐的，但是这样做省了某些人的功夫啊，例如势头日衰的开心网的做法：

响应的HTML代码如下（完整版）：

<input type="text" autocomplete="off" οnfοcus="if (this.value=='查找好友...') this.value = '';this.className='c0'; f2_inputOnfocus(event,this);" οnblur="f2_inputOnblur();" οnkeyup="f2_inputOnkeyup(event,this);event.cancelBubble = true;" οnkeydοwn="var ret = f2_inputOnkeydown(event ,this);event.cancelBubble = true;return ret;" value="查找好友..." style="width: 82px; height: 18px; float: left; padding: 3px 0pt 0pt 3px; font-size: 12px; border: medium none; background: url("http://img1.kaixin001.com.cn/i/h_search_bg.gif") no-repeat scroll 0% 0% rgb(255, 255, 255); color: rgb(153, 153, 153);" id="headsearchuser" />

我是个“代码精简控”，我是受不了上面的实现方法的。由于用的地方多，也方便其他人的使用，所以呢，有必要把这个方法独立出来，于是就有了本文的内容。“孩子”呢就是由于这个原因出身滴！

二、demo以及下载

最近我*******(secret)，加上两个项目并行，实在的忙，所以这里我就懒得打包的，js很小的，您可以右键 – [目标|链接]另存为：jquery.textRemindAuto-1.0.js

您可以狠狠地点击这里：实例demo

三、使用

使用很简单，方法是：textRemindAuto，最简单是使用类似下面代码：

$(".remindAuto").textRemindAuto();

参数
三个可控参数，一是默认的失去焦点的文字颜色，一个是文本框获得焦点时的文字颜色，还有一个就是切换显示的class，参见下面的实例：

$("#test").textRemindAuto({
        blurColor: "green",
        focusColor: "red",
        chgClass: "change"
    });

所表示的意思是：当名为test的控件获得焦点时文字颜色设置为红色，失去时文字颜色为绿色，同时class change则添加删除添加删除……

四、形式主义的结尾

这个所谓的插件实在拙劣的很，雕虫小技，不值一提。有备忘之嫌，练手之意，没有多少技术含量，大家看看就行了，要是您想使用使用，那是大大的欢迎。其他就不多说了，最后给自己打个小小广告，昨天我写了个CSS在线压缩工具，地址如下：http://www.zhangxinxu.com/sp/css-compress-mini.html，欢迎使用，并提交bug或是您的宝贵建议，可以mail我 – zhangxinxu@zhangxinxu.com或是到这里提交您的问题。

以最近很流行的一句话结尾：我勒个去！

原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=854