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

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

 

一、生孩子的理由

对于“意外怀孕”这样的事我是绝对不会做的,所以,写此算不上插件的(很鸡毛蒜皮的功能)的插件是有缘由的。设计师设计的了一个有很多数据提交的页面,显然,会有很多的表单,显然会有很多的提示,像是“老湿,你只能输入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

(本篇完)

分享到:


发表评论(目前8 条评论)

  1. edie说道:

    input.defaultValue

  2. 御御子说道:

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

  3. 阿刁说道:

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

    // 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);

  4. Daniel说道:

    开始RSS你

  5. Penn说道:

    博主写的东西很有用,但是我想问问delphi里如何实现文本编辑框文字提示自动显示隐藏?

  6. pengkai说道:

    博主完全可以应用在贵站的搜索框中。

  7. 空心莲子羹说道:

    不错 偶开始围观你