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

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();
                 }  
        });  
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u014253173/article/details/80008787
个人分类: javascript
上一篇R语言绘制文字云
下一篇Hexo中Next主题的简单个性化
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭