<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<style>
.wrap{position:relative;}
.wrap span{
position: absolute;
color: #A9A9A9;
left: 2px;
font-size: 13px;
top: 3px;
}
.disappear{display:none;}
</style>
</head>
<body>
<div class="wrap"><input type="text" placeholder="用户名"><span class="disappear">用户名</span></div>
<div class="wrap"><input type="password" placeholder="密码"><span class="disappear">密码</span></div>
</body>
<script>
$(function(){
function foo(){
$('input').siblings('span').removeClass('disappear')
//用span代替placeholder
$('input').focus(function(){
$(this).siblings('span').addClass('disappear');
});
$('input').keydown(function(){
$(this).siblings('span').addClass('disappear');
});
$('input').keyup(function(){
if($(this).val().length==0){
$(this).siblings('span').removeClass('disappear');
}
});
$('input').blur(function(){
if($(this).val().length==0){
$(this).siblings('span').removeClass('disappear');
}
});
$('input~span').click(function(){
$(this).siblings('input').focus();
})
}
$(function(){
if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.match(/8./i)=="8.")
{
foo();
}
if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.match(/9./i)=="9.")
{
foo();
}
})
})
</script>
</html>
