In order to save trouble, I often hope to press Enter to submit the form. To control these behaviors, you can use JS to meet the requirements.
The code is as follows:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="../../common/include_tag.jsp"%>
<%@ include file="../../common/page_var.jsp"%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><%=pageTitle%>-User login</title>
<%@ include file="../../common/page_head.jsp"%>
<link rel="stylesheet" type="text/css"
href="<s:url value='/css/common_green.css'/>" />
<script type="text/javascript" src="<s:url value='/js/'/>"></script>
<script type="text/javascript" src="<s:url value='/js/'/>"></script>
<style type="text/css">
.logo{
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
font-size: 28px;
}
.top{
padding-bottom: 100px;
}
.login{
line-height: 32px;
}
.content {
width: 350px;
margin: 15px auto auto;
padding: 50px 50px;
border: 2px solid #ccc;
border-radius: 10px;
box-shadow: 0 0 30px #ccc;
}
.bottom{
padding-top: 100px;
}
.button{
margin-top: 10px;
margin-left: 105px;
}
.update {
margin: 0 auto;
padding: 0;
width: 98%;
}
.update td {
margin: 0;
height: 30px;
padding: 5px;
}
.update .name {
text-align: right;
}
.title_div {
width: 350px;
}
body {
background: url("< s : url value = '/images/gray_bg.png'/ >") 0 0
repeat-y #F6F6F6;
}
</style>
<script type="text/javascript">
$(function() {
pilicat.title2div('title2div');
('form1', 'submit', true);
});
</script>
</head>
<body>
<div class="logo">Capital Airport Air-ground Automation Collaborative Decision-making System</div>
<div class="rounded table">
<div class="top"></div>
<div class="content">
<form action="<s:url value='/u/ulogin'/>" method="post">
<div align="center"><span style="color: red;">${captcha}</span></div>
<table class="table table-bordered table-striped" style="width: 310px; padding-left: 50px;">
<tbody>
<tr class="login">
<td><span>Account Number: </span></td>
<td><input type="text" name="userName"
class="input rounded" value="" placeholder="account" /></td>
</tr>
<tr class="login">
<td><span>dense code: </span></td>
<td><input type="password" name="passWd"
class="input rounded" value="" placeholder="password" /></td>
</tr>
<tr class="login">
<td><span>验证code: </span></td>
<td><input type="text" name="captcha" size="5" maxlength="5" class="input rounded" value="" placeholder="Verification Code" />
<img style="cursor: pointer; cursor: hand; margin-top: -5px; margin-right: -10px;" align="middle"
onclick="='<s:url value='/u/'/>?'+();"
src="<s:url value='/u/'/>">
</td>
</tr>
<tr class="login">
<td colspan="2">
<a class="submit" href="javascript:;" onclick="submitForm();">Log in</a>
</td>
</tr>
</tbody>
</table>
</form>
</div>
<div class="bottom"></div>
</div>
<%@ include file="../../common/"%>
</body>
</html>
Solution:
Put the form form in a div, and then listen to the event $("#id").keydown(function (){});
#*# Listen to the carriage return event
=function() {
if(==13) {
//Submit your form here
$('#ff_login').submit();
}
}
#*# page writes js scripts for listening. . .
#*#js listen for enter event#*#
Put the form form in a div, and then listen to the event $("#id").keydown(function (){});
#*#Get focus Listener#*#
Listen to the keypress event of the entire body. If it is the Enter key, it will trigger the click event of the submit button. Of course, your click event will have relevant data verification, etc. If it is verified, it will not be submitted.
I hope this article will be helpful to everyone's jsp programming.