jQuery placeholder, fix for IE6,7,8,9

让支持的直接路过，不支持的，完美显示~~

演示：http://ishere.cn/demo/jquery.jplaceholder/

标签：  jQuery

源码与演示：源码出处 演示出处

代码片段(2)[全屏查看所有代码]

1. [代码][JavaScript]代码     

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

/*   * jQuery placeholder, fix for IE6,7,8,9   * @author JENA   * @since 20131115.1504   * @website ishere.cn   */ 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($( '<div></div>' ).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 = $( '<span></span>' ).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. [代码]使用方法     

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<! doctype html> < html > < head > < meta charset = "utf-8" > < title >jQuery JPlaceholder Demo</ title > < script src = "jquery-1.8.3.min.js" ></ script > < script src = "jquery.JPlaceholder.js" ></ script > </ head >   < body > < form > < div >    < ul >      < li >        < input type = "text" name = "username" placeholder = "用户名" >      </ li >      < li >        < input type = "password" name = "username" placeholder = "密码" >      </ li >      < li >        < button type = "button" >登录</ button >      </ li >    </ ul > </ div > </ form > </ body > </ html >