• 按键盘enter键触发提交submit按钮


    要实现功能:在input框中输入text后直接按enter也可提交表单

    示例如下:

    1、html页面

    <form id="fm" action="#" name="ThisForm" method="post">
      <TABLE border="0" cellSpacing="0" cellPadding="0" width="100%">
          <TR>
              <TD style="HEIGHT:18px"><span id="msg" style="color:red;font-size:15px">${msg}</span></TD>
          </TR>
          <TR>
              <TD style="HEIGHT: 30px">
                  <span style="font-family: 微软雅黑;font-size: 13px;">账号:</span>
                  <INPUT type="text" id="userName" name="userName" style=" 110px;">
              </TD>
          </TR>
          <TR>
              <TD style="HEIGHT: 30px">
                  <span style="font-family: 微软雅黑;font-size: 13px;"> 密码:</span>
                  <INPUT type="password" id="userPw" name="userPw" style="110px;">
              </TD>
          </TR>
          <TR>
              <TD style="HEIGHT: 50px"> 
                  <input type="button" id="loginBtn" value="登陆" style=" 80px;" onclick='check1()'>
                  <img id="indicator" src="/${pageContext.request.contextPath}/images/loading.gif" style="display:none"/>
              </TD>
          </TR>   
    
      </TABLE>
    </form>

    2、js脚本

    <script>
    function check1(){
        //获取账户,密码,做非空校验
        var username=$("#userName").val();
        var password=$("#userPw").val();
        var um=$.trim(username);
        var up=$.trim(password);
        if(null==um||""==um){
            alert("请输入账户信息");
            return;
        }
        if(null==up||""==up){
            alert("请输入密码信息");
            return;
        }
        //判断用户选择的类型
        if(document.ThisForm.userType.value=="0"){
            //向管理员模块进行提交
            document.getElementById("fm").action="${pageContext.request.contextPath}/AdminServlet?method=adminLogin";
        }
            
        if(document.ThisForm.userType.value=="1"){
            //向老师模块进行提交
            document.getElementById("fm").action="${pageContext.request.contextPath}/TeacherServlet?method=teacherLogin";
        }
        document.getElementById("fm").submit();
        
    }
    //页面加载完毕
    $(function(){
        //按键盘enter键触发提交按钮
          $('#userPw').focus(function(){
                document.onkeydown = function (event) {
                    if (event && event.keyCode == 13) {
                        $("#loginBtn").click();
                    }
                }
            });
        
    });
    </script>  
  • 相关阅读:
    前端框架搭建
    npm的镜像和淘宝互换
    grunt,gulp,webpack前端打包工具的特性
    react 文章
    大数据学习08_HDFS2
    大数据学习07_HDFS1
    大数据学习06_zookeeper3_javaAPI操作
    大数据学习05_zookeeper2
    大数据学习04_zookeeper1
    大数据学习03_Linux集群搭建_辅助工具的安装
  • 原文地址:https://www.cnblogs.com/timetellu/p/11966494.html
Copyright © 2020-2023  润新知