• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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程序设计有所帮助。

    您可能感兴趣的文章:
    • JSP中的FORM表单中只有一个input文本时,按回车键将会自动提交表单
    • js实现点击图片自动提交action的简单方法
    • JS实现问卷星自动填问卷脚本并在两秒自动提交功能
    上一篇:jsp实现ie中的后退方法
    下一篇:javascript基础——String
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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