placeholder 模拟 点击文本域,清除默认值.

点击文本域,清除默认值.默认值显示时为灰色文字,点击后高亮显示,可绑定回车

事件.
项目中常用到的一个效果,封装成一个小小的插件,一点不复杂,需要的看下DEMO演

示中源码注释.若是不想只为清除一个默认文本调一个jQuery库,可以用原生的按

我的思路写一下,很简单.
特点
1.支持input文本域及textarea同时为多表单添加同样的默认值;
2.默认值可通过表单value值设定,也可通过插件参数(iset.curVal)设置.

iset.curVal默认值为null,但它优先于表单value值,当iset.curVal值设置时取

iset.curVal值忽略表单value值;
3.默认值时颜色自定义;
4.支持绑定回车事件,默认为null,可自行传入需要绑定回车事件的元素.

;(function($){
   $.fn.iClear= function(iSet) {
        /*
        * Curval：表单默认值
        * CurColor：默认颜色值
        * Enter：绑定回车事件的元素
        */
  var self=this;
       

iSet=$.extend({Curval:null,color:'#000',CurColor:'#ccc',Enter:null},iSe

t||{});
//alert($(this).val());
  $(self).each( function() {
            //当设置默认值是为表单赋默认值
            if (iSet.Curval != null) {
                $(self).val(iSet.Curval);
            }
            //表单focus,blur事件
            $(this).css('color', iSet.CurColor).focus( function() {
                $(this).css('color',iSet.color);
                if ($(this).val() == (iSet.Curval ? iSet.Curval :

this.defaultValue)) {
                    $(this).val('');
                }
            }).blur( function() {
                if ($(this).val() == '') {
                    $(this).val(iSet.Curval ? iSet.Curval :

this.defaultValue).css('color', iSet.CurColor);
                }
            });
            //绑定回车事件
            if (iSet.Enter != null) {
                $(this).keydown( function(e) {
                    if (e.keyCode == 13) {
                        iSet.Enter.click();
                    }
                });
            }
        });
    }
})(jQuery);

//插件调用
$(function(){
    $('input').iClear({
        enter: $(':submit')
    });
 $('textarea').iClear();
  
});  

<input type="text" value="INPUT-我是默认值" id="id_0" />