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