js实现input标签的placeholder属性在ie8不兼容

<div style="padding-top:8px;padding-bottom:8px;margin-left:30px;">
					<label>账号:</label>

					<input style="width:170px;font-size:14px;  height:35px;line-height:35px; color:#666;background:url(img/inputimg.jpg);background-position:-47px -34px;
					padding-left:6px; font-family:Arial, Helvetica, sans-serif;" type="text" name="username" placeholder="手机号码/用户名/邮箱" id="username"  />
				</div>
				<div style="padding-top:8px;padding-bottom:8px;margin-left:30px;">
					<label>密码:</label>
					<input style="width:170px;font-size:14px;height:35px;background:url(img/inputimg.jpg);background-position:-49px -34px; line-height:35px; color:#666; padding-left:6px; font-family:Arial, Helvetica, sans-serif;" type="text" name="username" placeholder="请输入密码" id="username"  />
				</div>

  

//页面需要引入jquery
	<script>
			
				var input = document.createElement('input');
				if("placeholder" in input){
					//alert('支持');
				}else{
					//alert('不支持');
						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 = '35px', paddingleft = self.css('padding-left');  
							
							var holder = $('<span></span>').text(txt).css({position:'absolute', left:pos.left, top:pos.top + 10, 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();      
});  
					
				}
</script>

  

猜你喜欢

转载自www.cnblogs.com/hanling1103/p/9391431.html
今日推荐