• 技术文章 >web前端 >H5教程

    如何实现jquery回车登录效果

    php中世界最好的语言php中世界最好的语言2018-03-14 15:29:45原创1531
    这次给大家带来如何实现jquery回车登录效果,实现jquery回车登录效果的注意事项有哪些,下面就是实战案例,一起来看一下。

    最近在做项目登录时,每次都需要点击登录按钮才可以进入相应的页面,给用户一个很不好的体验,所以我就添加使用回车键来实现登录。

    方法:

    <form> 
    <input type="text" id="username_txt" placeholder="用户名" />
    <input type="password" id="userpass_txt" placeholder="密码" />
        <button id="login_btn">登录</button>
    </form>
    $(function () { 
    $('#username_txt').focus();
        //用户点击按钮
        $("#login_btn").click(function () {
        //获取用户名
        var username = $('#username_txt').val();
        var userpass = $('#userpass_txt').val();
         if (username == "" || userpass == "") { alert("用户名密码不能为空!"'); }
        else {
    //调用登录方法
            $.ajax({
     });
     }
     });
    $("body").keydown(function(event) {
     if (event.keyCode == "13") {//keyCode=13是回车键
    $("#login_btn").click();
     }
    }); 
    });

    相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

    推荐阅读:

    使用DOM的一些小结

    怎样做出京东商品详情的放大镜效果

    以上就是如何实现jquery回车登录效果的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:jquery 登录 回车
    上一篇:jQuery自定义函数应用以及解析 下一篇:jquery中select组件的使用方法
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• HTML5 b和i标记将被赋予真正的语义_html5教程技巧• 开发人员需要牢记的HTML 5安全问题• HTML 5标签、属性、事件及兼容性速查表• 基于Modernizr 让网站进行优雅降级的分析_html5教程技巧• html5配合css3实现带提示文字的输入框(摆脱js)_html5教程技巧
    1/1

    PHP中文网