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

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

赞 (0)

相关推荐

  • JSP中的FORM表单中只有一个input文本时，按回车键将会自动提交表单

    一个列表界面只有一个输入框查询条件,当首次进入在输入框中输入汉字后,按回车键发现输入框中汉字变成乱码!本以为一个很简单不过的问题,结果却花了好久才找到原因(据说是浏览器问题),按回车后执行了两次查询. 1.未修改前代码: <form id="ff" name="ff" method="post"> <input type="text" id="userName" name="us

  • js实现点击图片自动提交action的简单方法

    利用js实现点击一张图片,直接上传到指定的action,方法简单,一看就会了,只需要用户点击图片一次就可以实现图片上传功能.主要用到了onclick,  onchange,  display属性,代码可以直接copy用.此代码适合上传单张图片,关于action部分此处没有,这里只简绍页面效果. html代码 <form action="p1.html" id="form" ENCTYPE="multipart/form-data" meth

  • JS实现问卷星自动填问卷脚本并在两秒自动提交功能

    JS实现问卷星自动填问卷脚本并在两秒自动提交功能

    脚本只使用问卷星,多选题目前为选中任意选项数量!!!!!!! 最近看到很多群里都在发问卷连接,各种求帮忙,正好这两天没任务,尝试写了自动填问卷的脚本,类似的脚本网上已经有了,但是后来问卷星加了验证,并且多选题已经不能适用 脚本使用方式(以Firefox为例): 一:鼠标移动到浏览器地址栏下空白处,右键,新建书签 二:填写名称(任意),代码复制到地址栏中 三:打开问卷星连接,然后点击刚刚添加的书签,即可. 代码: javascript: void ( (function () { var hash

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

    为了省事很多时候希望可以按回车键来提交表单,要控制这些行为,可以借助JS来达到要求. 代码如下: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="../../common/include_tag.jsp"%> <%@ include fi

  • IE浏览器下JS脚本提交表单后，不能自动提示问题解决方法

    IE浏览器下JS脚本提交表单后，不能自动提示问题解决方法

    本文实例讲述了IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法.分享给大家供大家参考,具体如下: 经常我们用表单提交东西,在提交后,浏览器会自动记录你输入的东西,下次你再输入的时候,可以重新选择,但是如果你是用IE的话,这里有一个BUG, 其他浏览器没有这个问题.当然首先你得设置IE 浏览器选项是可以记录表单数据的,然后写一段代码来测试. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> &

  • Form表单按回车自动提交表单的实现方法

    1.form表单中只有一个input标签,按回车键将自动提交表单 当form表单中只有一个<input type="text" name='name' />时按回车键将会自动将表单提交. <form id='form1' action='a1.jsp' method='post'> <input type='text' name='name' /> </form> 如果不想让其自动提交可以这样做: 再添加一个<input type=

  • HTML页面禁用Enter键自动提交表单的方法

    在HTML页里面由于使用了form,常常需要禁用enter提交表单.因为内容页或者母版页自身有如果有type="submit"的button,当textbox聚焦时,按下enter都会触发表单的默认提交(不论是IE还是firefox),于是需要在onkeydown中监听用户的按键.实际测试,IE8中导致表单提交的不确定因素太多,点击表单的table中的td都会触发表单提交,而firefox则不会:于是在ie和ff中禁用表单提交需要不同的思路. 对于IE: 只有当事件源是TEXTAREA

  • 如何防止INPUT按回车自动提交表单FORM

    form中的input只有一个,input获得焦点时按回车会form自动提交: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <form action="http://blog.csdn.net/gnail_oug" method=&qu

  • Java传入用户名和密码并自动提交表单实现登录到其他系统的实例代码

    不用单点登录,模拟远程项目的登录页面表单,在访问这个页面的时候自动提交表单到此项目的登录action,就可以实现登录到其他系统. ssh框架项目 1.以下是本地系统的action代码: import java.io.IOException; import java.util.List; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.i

  • php自动提交表单的方法(基于fsockopen与curl)

    本文实例讲述了php基于fsockopen与curl实现自动提交表单的方法.分享给大家供大家参考,具体如下: fsockopen和curl都可以做php自动提交表单 1. fsockopen方法: php代码: <?php /*----------------------------------------------------------- *功能:使用PHP socke 向指定页面提交数据 *作者:果冻 说明:post($url, $data) * * $url = 'http://www

  • IDEA中HTML通过servlet3.0注解名提交表单到servlet类找不到页面的问题

    这个问题困扰我整整一天一夜,先是代码检查路径设置找不出问题,后面换tomcat版不行,抱着侥幸心理换IDEA版本意料之中还是没解决问题. 都快想秃了最后终于完美解决了. 场景描述: IDEA中新建web项目 tomcat正常 HTML通过XML配置文件提交表单正常 当HTML通过Servlet注解名提交表单时404 问题分析: 通常404是路径出现问题,此时第一反应是form中action值和servlet注解值出错,检查后 属性值匹配.检查游览器访问路径最终找到问题出在启动虚拟路径上. 如图访

  • Nodejs下用submit提交表单提示cannot post错误的解决方法

    <span style="font-size:18px;"><form action="/registOK" method="get"> <p>用户名:<input type="text" id="userName" name="userName"></p> <p>密码:<input type="pa

随机推荐