<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>制作YY安全中心登录框特效 </title>
<script type="text/javascript" src="./js/jquery-1.8.3.min.js" ></script>
<style type="text/css" >
*{
margin:0px;
padding:0px;
font-size:12px;
}
#login{
position:relative;
height:282px;
width:494px;
background:url(images/bg.jpg) no-repeat;
}
#login input.text{
position:absolute;
height:26px;
line-height:26px;
color:#999;
width:207px;
}
.username{
left:183px;
top:105px;
}
.passwrd{
left:183px;
top:145px;
}
input.btn{
position:absolute;
left:183px;
top:190px;
height:32px;
line-height:32px;
width:100px;
background:url(images/btn.jpg) no-repeat;
border:none;
cursor: pointer;
}
#msg{
position:absolute;
left:183px;
top:230px;
color:red;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("input[name^='user']").focus(function() {
var str = $(this).val();
if(str == "通行账号/邮箱") {
$(this).val("");
}
});
// $("[name=username]").blur(function() {
// var str = $(this).val();
// if(str == '') {
// $(this).val("通行账号/邮箱"); //指代触发该事件的jquery对象
// }
// });
var $obj = $("[name=username]");
$obj.blur(function() {
var str = $obj.val();
if(str == '') {
$obj.val("通行账号/邮箱");
}
});
$("input[name='sub']").click(function() {
if($("[name=username]").val() == "通行账号/邮箱" || $("[name='password']").val() == "") {
$("p").addClass("msg").text("请输入账号密码");
}else{
$("p").css("color","green").html("登陆成功");
}
});
});
</script>
</head>
<body>
<div id="login">
<form>
<input type="text" name='username' class='text username' value="通行账号/邮箱" />
<input type="password" name='password' class='text passwrd' value=""/>
<input type="button" name='sub' class='btn' value=" "/>
<p id="msg"></p>
</form>
</div>
<div id="1"></div>
</body>
</html>上面的代码，我先输入账号和密码，再点击登录，显示绿色登录成功。这时令账号和密码中的至少一项为空，再次登录，却显示的是绿色的请输入账号密码，本应是红色字体。要是第一步就让账号或密码为空的话，就能得到想要的结果，红色的请输入账号密码。求指教