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

一、生孩子的理由

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

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

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

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

<input type="text" autocomplete="off" onfocus="if (this.value=='查找好友...') this.value = ''; this.className='c0'; f2_inputOnfocus(event,this);" onblur="f2_inputOnblur();" onkeyup="f2_inputOnkeyup(event,this);event.cancelBubble = true;" onkeydown="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或是您的宝贵建议。

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

补充于2018-01-01
现在回过头看这篇文章，实现的确实拙劣，且实现方法值得商榷。建议使用LuLu UI中的Placeholder.js，文档这里：https://l-ui.com/content/apis/placeholder.html

可以独立使用，您可以狠狠地点击这里：Placeholder占位符独立使用demo

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

（本篇完）