input输入框为空时,添加默认提示jquery插件

作为一枚前端工程师,我们经常会遇到处理页面输入框的时候,当输入框没有内容时,需要默认给加上一些提示内容。已引导用户正确顺畅的填写表单或输入搜索内容等,比如:“请输入用户名…”、“请输入搜索内容..”。

当用户单击输入框内(表单获得焦点),提示内容消失,等待用户输入完成,如果用户没有输入任何内容而离开,输入框失去焦点,提示重新出现。

如果你和我一样也一枚前端工程师,这样的情况会经常出现,处理这些,代码量并不大,但每次都要处理一遍,于是我就把这个小功能写成了一个独立的小插件,来减轻这种重复劳动的负担,(ps:程序员就是在这样不断封装和创造方便的过程中砸了自己的饭碗

插件效果如下(鼠标单击输入框内然后离开查看效果):

插件代码(文章结尾提供下载):

 /**
 * emptyValue 默认关键字效果
 */
(function($){
    $.fn.emptyValue = function(arg){
        this.each(function(){
            var input = $(this);
            var options = arg;
            if(typeof options == "string"){
                options = {empty: options}
            }
            options = jQuery.extend({
                empty: input.attr("data-empty")||"",
                className: "gray"
            }, options);
            return input.focus(function(){
                $(this).removeClass(options.className);
                if($(this).val() == options.empty){
                    $(this).val("");
                }
            }).blur(function(){
                if($(this).val()==""){
                    $(this).val(options.empty);
                }
                $(this).addClass(options.className);
            }).blur();
        });
    };
})(jQuery);

代码量并不多吧。

使用方法

先引入jquery和插件代码,这个就不多说了。

调用代码如下:

//有三种调用方法

//第一种
jQuery("input").emptyValue();
//这中调用方法写起来最简单,但需要所选择input标签含有data-empty属性
//用于记录输入框为空时候的提示内容

//第二种
jQuery("input").emptyValue("请输入要搜索的内容");
//直接将提示内容传递进去,优先级要高于第一种方法

//第三种
jQuery("input").emptyValue({
    empty: "请输入要搜索的内容", //传入提示内容
    className: "gray" //输入框失去焦点时,输入框的样式名,通常用户让字体颜色变灰
});
//gray样式代码:
.gray{
    color:#999;
}

好了就这些了,有不对或不好的地方欢迎斧正,谢谢!

—华丽丽的分割线———————————————————————-

2012年1月5日更新

在使用以上插件以后,添加input的默认提示变得容易很多,但是,在我们没有输入任何内容的时候,我们用jquery的val方法获取input的值的时候遇到了麻烦。他会返回诸如“请输入搜索内容…”的文字,这个时候我们需要单独判断是不是等于默认的空提示,来过滤为空提示信息,这是我们不希望看到的。那该怎么办呢?

办法有俩个。第一,我们再单独写一个类似于jquery val的方法,如val2。这个方法过滤掉提示内容,但这个方法在使用上不是很方便,需要使用者记住一些非jquery原生的方法名。

第二个办法,我们重写jquey val方法,来过滤提示消息,这样在使用的时候就完全不用管提示消息的存在。还是像原来一样处理input。不会因此额外增加任何判断代码。
新版插件代码如下,替换上面的插件代码,使用方式不变:

/**
 * emptyValue plugin 默认关键字效果
 * @version 1.3
 * @authod 雨打浮萍
 * Copyright (c) 2012 雨打浮萍 (http://www.rainleaves.com/)
 * For more docs and examples visit:
 * http://www.rainleaves.com/html/1357.html
 */
(function($){
	$.fn.val2 = $.fn.val;
	$.fn.emptyValue = function(arg){
        this.each(function(){
            var input = $(this);
            var options = arg;
            if(typeof options == "string"){
                options = {empty: options}
            }
            options = jQuery.extend({
                empty: input.attr("data-empty")||"",
                className: "gray"
            }, options);
            input.attr("data-empty",options.empty);
            return input.focus(function(){
                $(this).removeClass(options.className);
                if($(this).val2() == options.empty){
                    $(this).val2("");
                }
            }).blur(function(){
                if($(this).val2()==""){
                    $(this).val2(options.empty);
                }
                $(this).addClass(options.className);
            }).blur();
        });
    };
    //重写jquery val方法,增加data-empty过滤
    $.fn.val = function(){
    	var value = $(this).val2.apply(this,arguments);
    	var empty = $(this).attr("data-empty");
    	if(typeof empty != "undefined"&&empty==value){
    		value = "";
    	}
    	return value;
    };
})(jQuery);

完善版jquery emptyValue插件下载:jQuery.emptyValue.js

马上分享给你的朋友吧~

input输入框为空时,添加默认提示jquery插件》上有 14 条评论

    • 这样做,提交表单的时候,什么也没有输入,不是把默认内容提交出去了么

  1. 配合验证控件不好用啊,尽管重写了val方法。。难道jquery.validate里不是用val()方法取值的?????

  2. 我也是用的和你类似的方法做的,但是碰到了问题,在结合formValidate的时候,因为input的value值,会跳过最点点击submit时,formValidate对整个表单的验证。
    有人用div浮在input上面。

    • 这个问题好解决,修改一下formValidate,让formValidate获取值的时候用jquery的val()函数。
      formValidate原本好像是用原生的 .value 取值。

  3. $.fn.val = function(){
    这个和jQuery的val有冲突,火狐里报 too much recursion
    怎么解决?

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>