1. [代码][JavaScript]代码
123456789101112131415161718192021222324252627282930313233343536373839404142 | /* * jQuery placeholder, fix for IE6,7,8,9 * @author JENA * @since 20131115.1504 * @website ishere.cn */ var
//检测 _check : function (){ return in document.createElement( 'input' ); }, //初始化 init : function (){ if (! this ._check()){ this .fix(); } }, //修复 fix : function (){ jQuery( ':input[placeholder]' ).each( function (index, element) { var
this ), txt = self.attr( 'placeholder' ); self.wrap($( '<div></div>' ).css({position: 'relative' , zoom: '1' , border: 'none' , background: 'none' , padding: 'none' , margin: 'none' })); var
true ), paddingleft = self.css( 'padding-left' ); var
'<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] [全屏预览]
123456789101112131415161718192021222324252627 | <! doctype
< html > < head > < meta
= "utf-8" > < title >jQuery JPlaceholder Demo</ title > < script
= "jquery-1.8.3.min.js" ></ script > < script
= "jquery.JPlaceholder.js" ></ script > </ head > < body > < form > < div > < ul > < li > < input
= "text"
= "username"
= "用户名" > </ li > < li > < input
= "password"
= "username"
= "密码" > </ li > < li > < button
= "button" >登录</ button > </ li > </ ul > </ div > </ form > </ body > </ html > |