让IE支持placeholder属性 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>     
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     
<title>placeholder</title>   
<style>
body, textarea, select, input, button {font-family: "Hiragino Sans GB","Hiragino Sans GB W3","Microsoft YaHei","微软雅黑",tahoma,arial,simsun,"宋体" !important;}
html, body {width: 100%;height: 100%; overflow:hidden;}
body {text-align: left;background-color: #ededef;}
h1, h2, h3, h4, h5, h6 {font-weight: bold;font-size: 100%;}
ul{ width:300px; margin:150px auto; border:1px solid #ddd; border-radius:5px; box-shadow:3px 3px 3px rgba(0,0,0,0.3); background-color:#FFF; padding:30px; position:relative;}
li{ list-style:none; width:100%; margin:0px 0px 8px; padding:0px; display:block; border:none;}
li input{ width:100%;}
</style>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<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>
</body>
</html>

<script type="text/javascript">
	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();	
});
</script>

　　

posted on 2013-12-16 14:09  撒尿去了  阅读(57)  评论(0)    收藏  举报

导航