How to Realize Automatic Submit Form by Press Enter Key in jsp

2021-10-24 23:26:19
OfStack

In order to save trouble, many times you want 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/jquery.min.js'/>"></script>
<script type="text/javascript" src="<s:url value='/js/common.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');
 pilicat.keysubmit('form1', 'submit', true);
 });
</script>
</head>
<body>
 <div class="logo"> Air-ground Automation Collaborative Decision System of Capital Airport </div>
 <div class="rounded table">
 <div class="top"></div>
 <div class="content">
 <form id="form1" 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   No. : </span></td>
 <td><input type="text" id="userName" name="userName"
 class="input rounded" value="" placeholder=" Account number " /></td>
 </tr>
 <tr class="login">
 <td><span> Dense   Code : </span></td>
 <td><input type="password" id="passWd" name="passWd"
 class="input rounded" value="" placeholder=" Password " /></td>
 </tr>
 <tr class="login">
 <td><span> Verification code : </span></td>
 <td><input type="text" id="captcha" name="captcha" size="5" maxlength="5" class="input rounded" value="" placeholder=" Verification code " />
 <img id="captcha" style="cursor: pointer; cursor: hand; margin-top: -5px; margin-right: -10px;" align="middle"
 onclick="this.src='<s:url value='/u/captcha.htm'/>?'+Math.random();"
 src="<s:url value='/u/captcha.htm'/>">
 </td>
 </tr>
 <tr class="login">
 <td colspan="2">
 <a id="submit" class="submit" href="javascript:;" onclick="submitForm();"> Login </a>
 </td>
 </tr>
 </tbody>
 </table>
 </form>
 </div>
 <div class="bottom"></div>
 </div>
 <%@ include file="../../common/bottom.jsp"%>
</body>
</html>

Solution:

Place the form form in an div and listen for the div event $("# id"). keydown (function () {});

# * # Listen for Enter Events


document.onkeydown=function() {

if(event.keyCode==13) {

// Submit your form here 

$('#ff_login').submit();
}
}

The # * # page writes an js script for listening. . .

# * # js Listen for enter Events # * #

Put the form form in an div, and then listen for events $("# id"). keydown (function () {}) on this div;

# * # Get Focus Listening enter # * #

Monitor the keypress event of the whole body. If it is the Enter key, fire the click event of the submit button. Of course, there will be relevant data verification in your click event. If it is verified, it will not be submitted.

I hope this article is helpful to everyone's jsp programming.