登录使用layer插件, 回车无限弹框bug解决

Posted fatcar

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了登录使用layer插件, 回车无限弹框bug解决相关的知识,希望对你有一定的参考价值。

前言

其实layer如果是人工点击的话,根本不用考虑这种问题。但是从客户的体验度,输入账号密码,一直回车可能是比较方便。。。

直接贴代码

html:

           <form name="runlogin" id="runlogin" method="post" action=":url('Login/login')">
                <li class="user_name"><input type="text" name="user_name" id="user_name" placeholder="用户名/手机号/学号" class="login_input"></li>
                <li class="loginli"><input type="password" name="user_pwd" id="user_pwd" placeholder="请输入密码" class="login_input"></li>
                <li class="loginli"><input type="submit" name="submit" id="submit" class="login_sub" value="登录"></li>
                <li class="loginli"><a href=":url('register/index')" class="login_sub">注册</a></li>
            </form>
                   

js:

<script>
    /*点击回车登录*/
    $(document).on('keydown', function(e)
        if(event.keyCode == 13)
            e.preventDefault();//防止两次询问
            if($(".layui-layer-btn0").length<1)
                $("#runlogin").submit();
             
        

    )
    
    /*ajax处理弹出信息*/
    $("#runlogin").submit(function(e)
        e.preventDefault();//防止两次询问
        var user_name = $("#user_name").val();
        var user_pwd = $("#user_pwd").val();
        $.ajax(
            url:":url('login/login')",
            type:'post',
            data:'user_name':user_name,'user_pwd':user_pwd,
            dataType: 'json',
            success:function (data) 
                //登录失败,显示提示
                if(data.code==0)
                    layer.alert(data.msg,
                        success: function()
                            $(document).on('keydown', function(e) 

                                if(event.keyCode == 13) 
                                    // console.log($(".layui-layer-btn0").length);
                                    e.preventDefault();
                                    $(".layui-layer-btn0").click();
                                
                            );
                        
                        );
                 //登录成功,刷新页面
                else
                    layer.alert(data.msg,
                        success: function()
                            //回车能关闭
                            $(document).on('keydown', function(e) 

                                if(event.keyCode == 13) 
                                    e.preventDefault();
                                    $(".layui-layer-btn0").click();
                                    window.location.reload();
                                
                            );
                        ,
                        //点击确定也能跳转(没有这个。点击确定,不会跳转。。需要注意下)
                        yes:function()
                            window.location.reload();
                        
                    )
                
            
        )
    )
</script>

以上是关于登录使用layer插件, 回车无限弹框bug解决的主要内容,如果未能解决你的问题,请参考以下文章

layer/layui弹出层插件bug

插件———弹框

jquery-layer弹框在火狐浏览器中弹框不显示的问题

layer.open弹框中的表单数据无法获取

在vue中使用layer弹框

前端程序员请教大家一个问题,用 layer.js弹框火狐浏览器兼容问题。