美文网首页程序员之家Web前端之路让前端飞
Layer 弹窗 回车执行确定按钮事件

Layer 弹窗 回车执行确定按钮事件

作者: Nian糕 | 来源:发表于2017-09-11 11:53 被阅读278次
Unsplash

在 layer 弹层组件中,其确认按钮需要通过鼠标点击,而在实际需求中,我们往往想要通过回车就能够执行确定按钮事件,代码如下所示:

layer.open({
    type: 1,
    content: 'Where is the love?',
    btn: ['确定'],
    success: function(layero, index){
        this.enterConfirm = function(event){
            if(event.keyCode === 13){
                $(".layui-layer-btn0").click();
                return false; //阻止系统默认回车事件
            }
        };
        $(document).on('keydown', this.enterConfirm); //监听键盘事件

        // 点击确定按钮回调事件
        $(".layui-layer-btn0").on("click",function() {
            console.log("peace and love");
        })
    },
    end: function(){
        $(document).off('keydown', this.enterConfirm); //解除键盘事件
    }
});
运行结果

同样的,实现按 Esc 键关闭弹窗也是一样的方法,代码如下所示:

layer.open({
    type: 1,
    content: 'Where is the love?',
    btn: ['确定'],
    success: function(layero, index){
        this.escQuit = function(event){
            if(event.keyCode === 0x1B){
                layer.close(index);
                console.log("peace and love");
                return false; //阻止系统默认回车事件
            }
        };
        $(document).on('keydown', this.escQuit); //监听键盘事件
    },
    end: function(){
        $(document).off('keydown', this.escQuit); //解除键盘事件
    }
});
运行结果

两张运行结果图都是一样,看不出来有什么区别,还是建议大家亲自去试一试

End of File

行文过程中出现错误或不妥之处在所难免,希望大家能够给予指正,以免误导更多人,最后,如果你觉得我的文章写的还不错,希望能够点一下喜欢关注,为了我能早日成为简书优秀作者献上一发助攻吧,谢谢!^ ^

相关文章

网友评论

  • 36319d09f3f3:楼主这个方案是会自动关闭弹窗的,即使在事件内容里面return false,如果需要运用到yes不会自动关闭弹窗的特性,则不需要另起给layui-layer-btn0书写事件内容,当点击enter的时候,触发layui-layer-btn0的click事件,事件内容直接就是yes里面写好的
  • 溯水心生:作者用的是哪个版本?1.0or2.0,我发现,如果是确认弹框建议使用yes代替success,因为success为弹层只要加载成功就会执行success之后的js内容,而yes为点击弹层才执行之后的js
    Nian糕:使用的是v1.0.7版本,因为需要在弹出层创建完毕时,即执行一些语句,所以才选择了success 回调,主要还是看项目的具体需求吧

本文标题:Layer 弹窗 回车执行确定按钮事件

本文链接:https://www.haomeiwen.com/subject/umwxsxtx.html