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