zoukankan      html  css  js  c++  java
  • 按键盘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>  
  • 相关阅读:
    UBUNTU 自动挂载 NTFS
    automake autoconf 学习笔记(转载)
    error: X11/extensions/XInput.h: No such file or directory
    error: undefined macro: AC_PROG_LIBTOOL
    Linux下tar.xz结尾的文件的解压方法
    Ubuntu 修改hosts
    ubuntu主目录下的中文文件夹名改回英文
    ./configure: No such file or directory
    Ubuntu下GTK的安装、编译和测试
    图像适配源码
  • 原文地址:https://www.cnblogs.com/timetellu/p/11966494.html
Copyright © 2011-2022 走看看