效果：

效果二：

请在IE中体验。

 

1、创建JS文件：jquery.JPlaceholder.js

js代码如下：

/* * jQuery placeholder, fix for IE6,7,8,9* hovertree.com */var JPlaceHolder = {    //检测    _check : function(){        return 'placeholder' in document.createElement('input');    },    //初始化    init : function(){        if(!this._check()){            this.fix();        }    },    //修复 何问起    fix : function(){        jQuery(':input[placeholder]').each(function(index, element) {            var self = $(this), txt = self.attr('placeholder');            self.wrap($('
     
').css({position:'relative', zoom:'1', border:'none', background:'none', padding:'none', margin:'none'}));            var pos = self.position(), h = self.outerHeight(true), paddingleft = self.css('padding-left');            var holder = $('').text(txt).css({position:'absolute', left:pos.left, top:pos.top, height:h, lienHeight:h, paddingLeft:paddingleft, color:'#aaa'}).appendTo(self.parent());            self.focusin(function(e) {                holder.hide();            }).focusout(function(e) {                if(!self.val()){                    holder.show();                }            });            holder.click(function(e) {                holder.hide();                self.focus();            });        });    }};//执行 jQuery(function(){    JPlaceHolder.init();    });

2、页面中使用方法如下：

      
     
      
  
       
    
        
          
    
        
          
    
        
      登录    
  
       
      
     
参考

实践是检验真理的唯一标准，希望能到大家。

参考：

 

更多特效：