前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Layer 弹窗 回车执行确定按钮事件

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

作者头像
Nian糕
修改2024-03-19 11:31:05
3K0
修改2024-03-19 11:31:05
Unsplash
Unsplash

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

代码语言:javascript
复制
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 键关闭弹窗也是一样的方法,代码如下所示:

代码语言:javascript
复制
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); //解除键盘事件
    }
});
运行结果
运行结果

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017.09.11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档