问题求助。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>

    <script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
    <style>
    	body{
    		padding: 0px;
    		margin: 0px;
    		background-color: #E4E4E4;
    	}
    			.login_top{
			width: 100%;
			height: 150px;
		}
		.login_middle{
			width: 100%;
			height: 150px;
		}
		.login_input{
			width: 100%;
			height: 40px;
			margin-top: -1px;
			border: 0px;
			font: 14px "微软雅黑" ;
			outline: none;
		}
		.login_login{
			width: 90%;
			height: 40px;
			margin: 10px 5% 0 5%;
			border-radius: 5px;
			border: 0px;
			color: white;
			background-color: #0000FF;
			font: 14px "微软雅黑";
			
		}
		.login_forgetpwd{
			position: fixed;
			left: 0px;
			bottom: 0px;
			font: 12px "微软雅黑";
			color: blue;
		}
		.login_regist{
			position: fixed;
			right: 0px;
			bottom: 0px;
			font: 12px "微软雅黑";
			color: blue;
		}
    </style>
</head>
<body>	
	<div class="login_top"> 
		<div id="login_errorshow" style="width: 100%;height: 43px;background-color: orange;">
			<div style="width:100%;height: 9px;"></div>
				<div id="login_errortext" style="width: 90%;height: 25px;text-align:center; font: 13px '微软雅黑'; color: white; margin: 0 5% 9px 5%;">
						
				</div>
		</div>
	</div> 
	<div class="login_middle">
		<input type="text" id="login_username" class="login_input" placeholder="用户名/手机号" />
		<input type="password" id="login_userpwd" class="login_input" placeholder="密码" style="border-top: 1px solid #E4E4E4;"/>
		<button id="login_button" class="login_login">登录</button>
	</div>
	<div id="login_bottom">
		<div class="login_forgetpwd">
			<a href="forgetpwd.html" class="login_forgetpwd" style="text-decoration: none;">忘记密码</a>
		</div>
		<div class="login_regist"> 
			<a href="regist.html" class="login_regist" style="text-decoration: none;">注册</a>
		</div>
	</div>
</body>
	<script type="text/javascript">
		$("#login_errorshow").hide(); 
		$("#login_button").click(function(){
			var l_name=localStorage.getItem("username");
			var l_pwd=localStorage.getItem("userpwd");
			var login_name=$("#login_username").val();
			var login_pwd=$("#login_userpwd").val();
			if(l_name!=login_name){
				$("#login_errorshow").show();
				$("#login_errortext").html("用户名不存在！")
				login_errorhide();
			} else if(l_pwd!=login_pwd){
				$("#login_errorshow").show();
				$("#login_errortext").html("密码错误！")
				login_errorhide();
			}else{
				window.location.href="homepage.html";
				localStorage.setItem("zidongdenglu","yes");
			}
		});
		function login_errorhide(){
			setTimeout(function(){
					$("#login_errorshow").hide(); 
			},2000);
		};
		$(function(){
			var flag=localStorage.getItem("zidongdenglu");
			if(flag=="yes"){
				if(localStorage.getItem("username")&&localStorage.getItem("userpwd")){
					window.location.href="homepage.html";
				}
			}
			
		});
		//判断用户是否在输入，如果再输入就把下面的内容隐藏掉，不然会被键盘给顶起来
                //这里固定的最下方的div会被键盘给顶上来，只能设置隐藏，但是如果隐藏了的话，
                //  键盘不是失焦而关掉，而是点击键盘上的关闭而关闭的键盘就会出现div没有显示，最下方是空白的情况。求助怎么解决。
		$("#login_username").focus(function(){
			$("#login_bottom").hide();
		});
		$("#login_username").blur(function(){
			$("#login_bottom").show();
		});
		$("#login_userpwd").focus(function(){
			$("#login_bottom").hide();
		});
		$("#login_userpwd").blur(function(){
			$("#login_bottom").show();
		})
	</script>
</html>
猜你喜欢
