您的位置：首页 > Web前端 > JavaScript

jsp中如何实现按下回车键自动提交表单

2016-10-12 00:00 232 查看

为了省事很多时候希望可以按回车键来提交表单，要控制这些行为，可以借助JS来达到要求。

代码如下：

<%@ 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%>-用户登录</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">首都机场空地自动化协同决策系统</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>账 号: </span></td>
<td><input type="text" id="userName" name="userName"
class="input rounded" value="" placeholder="账号" /></td>
</tr>
<tr class="login">
<td><span>密 码: </span></td>
<td><input type="password" id="passWd" name="passWd"
class="input rounded" value="" placeholder="密码" /></td>
</tr>
<tr class="login">
<td><span>验证码: </span></td>
<td><input type="text" id="captcha" name="captcha" size="5" maxlength="5" class="input rounded" value="" placeholder="验证码" />
<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();">登录</a>
</td>
</tr>
</tbody>
</table>
</form>
</div>
<div class="bottom"></div>
</div>
<%@ include file="../../common/bottom.jsp"%>
</body>
</html>

解决方案：

把form表单放在一个div里面，然后对这个div监听事件$("#id").keydown(function (){});

#*#监听回车事件

document.onkeydown=function() {

if(event.keyCode==13) {

//这里提交你的表单

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

#*#页面编写js脚本进行监听。。。

#*#js监听enter事件#*#

把form表单放在一个div里面，然后对这个div监听事件$("#id").keydown(function (){});

#*#获取焦点监听enter#*#

监听整个body的keypress事件，如果是回车键，激发submit按钮的click事件，当然你的click事件中会有相关的数据验证之类的，如果验证不过，不会提交。

希望本文所述对大家jsp程序设计有所帮助。

您可能感兴趣的文章:

jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
javascript 回车键触发表单提交的问题
javascript实现回车键提交表单方法总结
js 回车提交表单两种实现方法
Jquery响应回车键直接提交表单操作代码
网页中表单按回车就自动提交的问题的解决方案
表单切换，用回车键替换Tab健(不支持IE)
表单填写时用回车代替TAB的实现方法
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
js光标定位文本框回车表单提交问题的解决方法
jquery按回车键实现表单提交的简单实例

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 表单回车 jsp

相关文章推荐

新的分享

章节导航