登陆界面回车响应的简单实现

1. 需求

最近要实现一个登陆界面的回车响应功能，在输入账号和密码之后，按回车键就可以直接登录。试了很多种方法，有些方法不兼容，最终用jqury实现了这个功能。

2. 细节

主要用到了jqury中的keypress方法，用来监听键盘的动作。
浏览器有3种按键事件——keydown，keypress和keyup，分别对应onkeydown、onkeypress和onkeyup 3个事件句柄。

一个典型的按键会产生所有这三种事件，依次是keydown–>keypress–>keyup。

完整的 key press 过程分为两个部分：1. 按键被按下；2. 按键被松开。
当按钮被按下时，发生 keydown 事件。当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。
不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件。

3.代码实现

登录界面如图所示（界面做的有点丑），由一个div和3个输入框，一个登陆按钮组成。

<div id=c0 class="tab-style-1">

                 <div id=cc>Sign In 登录</div>

                 <p class="validate">
                        <input type="text" id="account" name="account"
                            class="form-control" placeholder="用户名/邮箱" required="" autofocus="" value=""> 

                 </p>

                 <p class="validate">
                        <input type="password" id="password" name="password"
                            type="password" class="form-control" placeholder="密码" required="" value=""> 
                 </p>

                <table style="margin:auto">
                        <tr>
                            <td><input type="text" class="vcode" id="vcode" name="vcode"
                                placeholder="验证码">&nbsp;&nbsp;
                            </td>
                            <td><img id="vcode_img" onclick="changeImage();" class="vcode"
                                src="../ImageServlet.jpeg" style="cursor:pointer;">&nbsp;
                            </td>
                        </tr>
                </table>

                <p>
                    <input name="ok" id="loginok" style="height:40px;" type="submit"
                        onclick="login();" value="Log In 登入">
                </p>

              </div>

.tab-style-1 {
    right: 300px;
    height: 350px;
    background-color: #648eb4;
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;
    border: 0px #30587c solid;
    width: 300px;
    text-align: center;
}

#c0{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
     border-radius: 5px;
    -moz-box-shadow: 5px 7px 16px #33102F;
    -webkit-box-shadow: 5px 7px 16px #33102F;
     box-shadow: -5px 7px 16px #33102F;
}

#cc {
    height: 50px;
    line-height: 50px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    background-color: #77899d;
    border-bottom: 0px #30587c solid;
    font-family: 'Raleway', 'Lato', Arial, sans-serif;
    font-size: 22px;
    color: white;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), 0 2px 1px
        rgba(0, 0, 0, 0.1);
}

.validate {
    width:100%;
    position: relative;
    overflow: hidden;
    padding-bottom: 1px;
}

.form-control {
    display: block;
    width: 70%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #fff;
    background: rgba(0, 0, 0, .5);
    background-image: none;
    border: 1px solid rgba(0, 0, 0, .075);
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow
        ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out
        .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    margin:0 auto;
}

input[type="submit"] {
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    border: none;
    width: 75%;
    height: 55px;
    background: #69caed;
    color: #fff;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    margin-top:15px;
    border: 1px #648298 solid;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), 0 2px 1px
        rgba(0, 0, 0, 0.1);
}

.vcode {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    padding-left:5px;
    width:100px;
    height:35px
}

把键盘监听的区域放在div中，在3个输入框输入后按Enter键，都会触发keypress事件。

这里的e.keyCode ? e.keyCode : e.which ? e.which : e.charCode是为了兼容性，因为不同浏览器中的属性有所不同，IE只有keyCode属性，FireFox中有which和charCode属性，Opera中有keyCode和which属性，Chrome中有keyCode、which和charCode属性。

13表示enter按键的keycode编码。常见的keycode编码还有BackSpace 8 ，Tab 9 ，Shift 16。

$(".tab-style-1").keypress(function (e){  
           //var code = event.keyCode;  
           //var code = e.keyCode || e.which || e.charCode;  
           var code = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
                if (13 == code) {  
                     //alert("响应键盘的enter事件");  
                     login();
                 }  
        });