主页 > 知识库 > jsp中如何实现按下回车键自动提交表单

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

热门标签:银行业务 Mysql连接数设置 阿里云 团购网站 电子围栏 Linux服务器 科大讯飞语音识别系统 服务器配置

为了省事很多时候希望可以按回车键来提交表单,要控制这些行为,可以借助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中的FORM表单中只有一个input文本时,按回车键将会自动提交表单
  • js实现点击图片自动提交action的简单方法
  • JS实现问卷星自动填问卷脚本并在两秒自动提交功能

标签:衢州 蚌埠 大理 江苏 萍乡 广元 枣庄 衡水

巨人网络通讯声明:本文标题《jsp中如何实现按下回车键自动提交表单》,本文关键词  ;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 收缩
    • 微信客服
    • 微信二维码
    • 电话咨询

    • 400-1100-266