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

Java  /  管理员 发布于 7年前   222

为了省事很多时候希望可以按回车键来提交表单，要控制这些行为，可以借助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="https:/article/<s:url value='/css/common_green.css'/>" /><script type="text/javascript" src="https:/article/<s:url value='/js/jquery.min.js'/>"></script><script type="text/javascript" src="https:/article/<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='https:/article/<s:url value='/u/captcha.htm'/>?'+Math.random();" src="https:/article/<s:url value='/u/captcha.htm'/>"> </td> </tr> <tr class="login"> <td colspan="2"> <a id="submit" class="submit" href="" 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程序设计有所帮助。


  • 上一条：
    使用JS显示倒计时数字时钟效果
    下一条：
    jsp实现ie中的后退方法

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客