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

这篇文章发布于 2010年06月7日，星期一，21:24，归类于 jQuery相关。阅读 92705 次, 今日 1 次 8 条评论

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

一、生孩子的理由

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

淘宝首页的搜索提示信息张鑫旭-鑫空间-鑫生活

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

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

（本篇完）

jQuery图片文本滚动切换插件jCarousel中文翻译与详解 (0.581)
HTML5 placeholder实际应用经验分享及拓展 (0.457)
小tip:FireFox下文本框/域百分比padding bug解决 (0.419)
残忍：IE10↘IE7-IE9 type=email的完全抛弃 (0.251)
有意思：textarea resize属性下纯CSS交互效果 (0.168)
详细了解CSS :focus-within伪类及其交互应用 (0.168)
gitee上撸了个类似飞书OKR输入框的@提及项目 (0.168)
jQuery boxy弹出层对话框插件中文演示及讲解 (0.078)
jQuery照片图像剪裁插件Jcrop中文翻译详解 (0.078)
jQuery-马化腾产品设计与用户体验的一些技术实现 (0.078)
js写的打方块打飞机小游戏 (RANDOM - 0.016)

分享到：

标签： flickr, jQuery, plugin, toggleClass, 插件, 文本域, 文本框

edie说道：

2013年05月14日 23:23

input.defaultValue

御御子说道：

2011年10月11日 10:55

html5下有原生的解决方案
因为我不为工资写网页的缘故，所以我可以很开心的让IE都滚蛋

阿刁说道：

2011年06月4日 18:35

把这个插件加上了详细的注释，不晓得对不对哈

// by zhangxinxu 2010-06-07 v1.0 welcome to visit my personal website htp://www.zhangxinxu.com/
// 2010-06-13 v1.1 添加加载后是否自动调用失去焦点颜色判断
// 文本框文本域提示文字的自动显示与隐藏
(function($){
$.fn.textRemindAuto = function(options){ //取名textR….
options = options || {}; //如果有带入参数就用带入的，否则不用
var defaults = { //默认参数
blurColor: “#999”, //失去焦点要设置的文字颜色
focusColor: “#333”, //获得焦点要设置的文字颜色
auto: true,
chgClass: “”
};
var settings = $.extend(defaults,options); //扩展参数，下面就用settings.xxx 调用
$(this).each(function(){ //循环每个被选择的输入框
if(defaults.auto){ //如果自动调用失去焦点颜色判断
$(this).css(“color”,settings.blurColor); //把color的值设置为参数里的blurcolor
}
var v = $.trim($(this).val()); //获得文本框里的字符，并去掉起始和结尾的空格
if(v){ //如果输入框里有输入字符
$(this).focus(function(){ //聚焦时触发
if($.trim($(this).val()) === v){ //如果聚焦后获得的字符和聚焦前获得的字符一样就把字符清空
$(this).val(“”);
}
$(this).css(“color”,settings.focusColor); //如果聚焦后获得的字符和聚焦前获得的字符不一样，就改变颜色为参数focusColor
if(settings.chgClass){ //如果有设置切换class
$(this).toggleClass(settings.chgClass); //就切换一下class
}
}).blur(function(){ //失焦时触发
if($.trim($(this).val()) === “”){ //如果文本框里没有字符
$(this).val(v); //就把聚焦前获得的字符字符写进去
}
$(this).css(“color”,settings.blurColor); //设置颜色为参数blurColor
if(settings.chgClass){ //如果有设置切换class
$(this).toggleClass(settings.chgClass); //就切换一下class
}
});
}
});
};
})(jQuery);