回车键实现登录

最新推荐文章于 2023-10-19 18:05:24 发布

做一道光

最新推荐文章于 2023-10-19 18:05:24 发布

阅读量2.4k

点赞数 2

分类专栏： CRM项目实战（SSM版）文章标签： java 服务器前端

本文链接：https://blog.csdn.net/weixin_59334478/article/details/125606511

版权

CRM项目实战（SSM版）专栏收录该内容

48 篇文章 10 订阅

订阅专栏

jquery事件函数的用法：
1. 选择器.click(function(){//给指定的元素添加事件
//js代码
});

2. 选择器.click();//在指定的元素上模拟发生一次事件

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
	String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<html>
<head>
<meta charset="UTF-8">
	<base href="<%=basePath%>">
<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>

    <script type="text/javascript">
    $(function () {

    	//给整个浏览器窗口添加键盘按下事件
		$(window).keydown(function (event) {
			//如果按的是回车键，则提交登录请求
			if (event.keyCode==13){
				$("#loginBtn").click();
			}
		})

        //给登录按钮添加单击事件
       $("#loginBtn").click(function () {
          //收集参数
           var loginAct=$.trim($("#loginAct").val());
           var loginPwd=$.trim($("#loginPwd").val());
           var isRemPwd=$("#isRemPwd").prop("checked");
           //表单验证
           if (loginAct==""){
               alert("用户名不能为空！");
               return;
           }if (loginPwd==""){
               alert("密码不能为空！");
               return;
           }
           //点击登录后显示正在验证
		   $("#msg").html("正在努力验证中。。。")

               //发送请求
               $.ajax({
                   url:'settings/qx/user/login.do',
                   data:{
                       loginAct:loginAct,
                       loginPwd:loginPwd,
                       isRemPwd:isRemPwd
                   },
                   type:'post',
                   dataType:'json',
                   success:function (data) {
                       if (data.code=="1"){
                           //登录成功，跳转到业务的主页面
                           window.location.href="workbench/index.do";
                       }else {
                           //登录失败,显示提示信息
                           $("#msg").html(data.message);
                       }
                   }
               });

       });
    });
    </script>

</head>
<body>
	<div style="position: absolute; top: 0px; left: 0px; width: 60%;">
		<img src="image/IMG_7114.JPG" style="width: 100%; height: 90%; position: relative; top: 50px;">
	</div>
	<div id="top" style="height: 50px; background-color: #3C3C3C; width: 100%;">
		<div style="position: absolute; top: 5px; left: 0px; font-size: 30px; font-weight: 400; color: white; font-family: 'times new roman'">CRM &nbsp;<span style="font-size: 12px;">客户关系管理系统</span></div>
	</div>
	
	<div style="position: absolute; top: 120px; right: 100px;width:450px;height:400px;border:1px solid #D5D5D5">
		<div style="position: absolute; top: 0px; right: 60px;">
			<div class="page-header">
				<h1>登录</h1>
			</div>
			<form action="workbench/index.html" class="form-horizontal" role="form">
				<div class="form-group form-group-lg">
					<div style="width: 350px;">
						<input class="form-control" id="loginAct" type="text" placeholder="用户名">
					</div>
					<div style="width: 350px; position: relative;top: 20px;">
						<input class="form-control" id="loginPwd" type="password" placeholder="密码">
					</div>
					<div class="checkbox"  style="position: relative;top: 30px; left: 10px;">
						<label>
							<input type="checkbox" id="isRemPwd"> 十天内免登录
						</label>
						&nbsp;&nbsp;
						<span id="msg" style="color: red;"></span>
					</div>
					<button type="button" id="loginBtn" class="btn btn-primary btn-lg btn-block"  style="width: 350px; position: relative;top: 45px;">登录</button>
				</div>
			</form>
		</div>
	</div>
</body>
</html>

不设置该jquery事件，只能通过鼠标点击实现登录，导致用户操作性差。

设置后就可以按击回车键实现登录操作，同时拥有所有的登录事件函数中的所有判断。

以上均是通过回车键实现

做一道光

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
回车键实现登录

jquery事件函数的用法： 1. 选择器.click(function(){//给指定的元素添加事件 //js代码 }); 2. 选择器.click();//在指定的元素上模拟发生一次事件不设置该jquery事件，只能通过鼠标点击实现登录，导致用户操作性差。设置后就可以按击回车键实现登录操作，同时拥有所有的登录事件函数中的所有判断。以上均是通过回车键实现......
复制链接

扫一扫