zoukankan      html  css  js  c++  java
  • 简单Demo的用户登录JSP界面IE、Firefox(chrome) Enter 键提交表单

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>系统登录</title>
    <%@ include file="/common/taglibs.jsp"%>
    <script type="text/javascript">
        function validateUserInfo() {
            var username = document.getElementById("username").value;
            var password = document.getElementById("password").value;
            if (!username) {
                alert("请输入账号!");
            } else if (!password) {
                alert("请输入密码!");
            } else {
                if (username == "admin" && password == "admin2014") {
                    document.getElementById("frm").submit();
                } else {
                    alert("账号或密码错误!");
                    cancle();
                }
            }
        }
        //取消操作
        function cancle() {
            document.getElementById("username").value = "";
            document.getElementById("password").value = "";
            document.getElementById("username").focus();
        }
        //回车提交表单,这两种方案在chrome下执行正常
        if (document.addEventListener) {//如果是Firefox    
            document.addEventListener("keypress", fireFoxHandler, true);
        } else {
            document.attachEvent("onkeypress", ieHandler);
        }
        function fireFoxHandler(evt) {
            //alert("firefox");    
            if (evt.which == 13) {
                validateUserInfo();
            }
        }
        function ieHandler(evt) {
            //alert("IE");    
            if (evt.keyCode == 13) {
                validateUserInfo();
            }
        }
    </script>
    </head>
    </head>
    <body class="easyui-layout" style="background-color: #C3DDF4;">
        <center>
            <div style="padding-top: 50px; background-color: white;">
                <div>
                    <img alt="logo" src="res/images/logo.jpg">
                </div>
                <label style="font-family: '微软雅黑'; font-size: 28px;">川庆钻探工程有限公司地球物理勘探公司山地数字地震队管理系统</label>
                <form id="frm" action="${ctx}/login" method="post">
                    <table
                        style="border: 1px solid; border-color: white;  270px; padding: 20px;">
                        <tr>
                            <th>账号:</th>
                            <td><input id="username" name="username" type="text"/></td>
                            <td></td>
                        </tr>
                        <tr>
                            <th>密码:</th>
                            <td><input id="password" name="password" type="password"/></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td><input type="button" value="登录"
                                onclick="validateUserInfo()" />&nbsp;&nbsp; <input type="button"
                                value="取消" onclick=" cancle()" /></td>
                            <td></td>
                        </tr>
                    </table>
                </form>
            </div>
        </center>
        <center>
            <div style="bottom: 30px; padding-left: 35%;; position: absolute;">
                <center>Copyright &copy; 2013 - 2014 川庆钻探工程有限公司地球物理勘探公司</center>
            </div>
        </center>
    </body>
    </html>
  • 相关阅读:
    ASP.NET 点击前台服务器按钮后, 刷新. 重新执行 按钮事件
    动态绑定数据日历jquery
    前端及移动端学习 笔记 -待更新
    jq 兼容性 ie7,ie8
    jQuery中的$(window).load()与$(document).ready()
    SqlServer中循环和条件语句示例!
    调用一般处理程序 提供接口api
    background-position: -24px 0px
    中奖名单滚动
    在此上下文中不允许使用子查询
  • 原文地址:https://www.cnblogs.com/boonya/p/3529430.html
Copyright © 2011-2022 走看看