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

所属分类: 网络编程 / JSP编程 阅读数: 990
收藏 0 赞 0 分享

为了省事很多时候希望可以按回车键来提交表单,要控制这些行为,可以借助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程序设计有所帮助。

更多精彩内容其他人还在看

jsp中使用frameset框架 边框固定不让更改边框的大小

有时候可能要对自己布局好的页面不让用户更改边框的大小,这样我们可以在frame里面添加noresize="noresize"属性就可以实现其中的功能
收藏 0 赞 0 分享

response.getWriter().write()向前台打印信息乱码问题解决

本节主要介绍了response.getWriter().write()向前台打印信息乱码问题解决方法,需要的朋友可以参考下
收藏 0 赞 0 分享

jsp页面中如何将时间戳字符串格式化为时间标签

本节主要介绍了jsp页面中如何将时间戳字符串格式化为时间标签,需要的朋友可以参考下
收藏 0 赞 0 分享

获取上一页面的URL和本页的URL的方法

本节主要介绍了获取上一页面的URL和本页的URL的方法,需要的朋友可以参考下
收藏 0 赞 0 分享

window.top[_CACHE]实现多个jsp页面共享一个js对象

两个js页面要共享一个就js对象,想了半天用window.top['_CACHE']来存放这个变量,即可实现,不同Jsp页面直接的对象共享
收藏 0 赞 0 分享

通过过滤器(Filter)解决JSP的Post和Request中文乱码问题

这篇文章主要介绍了jsp中通过过滤器(Filter)解决JSP的Post和Request中文乱码问题的方法,需要的朋友可以参考下
收藏 0 赞 0 分享

JSP页面的动态包含和静态包含示例及介绍

这篇文章主要介绍了JSP页面的动态包含和静态包含示例及介绍,本文讲解了它们的区别并给出了相应例子,需要的朋友可以参考下
收藏 0 赞 0 分享

JSP中实现判断客户端手机类型并跳转到app下载页面

这篇文章主要介绍了JSP中实现判断客户端手机类型并跳转到app下载页面,实现的原理,是检测浏览器的 USER-AGENT 这个header,然后根据正则表达式来确定客户端类型,需要的朋友可以参考下
收藏 0 赞 0 分享

jsp实现点击help打开chm文件

有个javaweb项目,需要在portal上面点击help即可打开“帮助.chm”文件,下面与大家分享下jsp如何打开chm文件
收藏 0 赞 0 分享

JSP自定义分页标签TAG全过程

这篇文章主要介绍了JSP自定义分页标签TAG全过程,比较实用,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多