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

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

作者头像
Nian糕
修改于 2024-03-19 03:31:05
修改于 2024-03-19 03:31:05
3.4K00
代码可运行
举报
运行总次数:0
代码可运行
Unsplash
Unsplash

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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
代码运行次数:0
运行
AI代码解释
复制
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 删除。

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
LayUI树形表格treetable使用详解
LayUI是现在比较流行的一款前端框架,也有很多人基于LayUI开发了很多不错的组件,比如treetable树形表格。因为treetable是第三方基于LayUI开发的,所以需要先用Layui引入一下文件。
全栈程序员站长
2022/07/01
9.1K1
LayUI树形表格treetable使用详解
layui的layer弹出层和form表单
如果想用layui来完成增删改查,那么要会用弹出层和form表单这两个组件是必须的,所以今天就来介绍一些如何用layui完成基本的增删改查
全栈程序员站长
2022/09/14
5.1K0
layui的layer弹出层和form表单
layui框架——弹出层layer[通俗易懂]
Array:例如title: [‘文本’, ‘font-size:18px;’],数组第二项可以写任意CSS样式
全栈程序员站长
2022/08/18
13.7K0
layui框架——弹出层layer[通俗易懂]
6.条件渲染v-if、监听键盘事件$event
 vi-if与v-show用法相同,v-if是代表根据条件渲染,v-show是代表将所有的都渲染出来,根据条件显示。
玩蛇的胖纸
2019/09/29
9820
6.条件渲染v-if、监听键盘事件$event
LayUI之旅-入门
最近要做一个项目,被要求前端要使用layui,甲方爸爸很牛逼的好吗,既然要求这样了,二话不说,撸起袖子就开干,由于从来没用过layui这个框架,对框架的不熟悉导致在使用的过程中是步步都是障碍啊,还是那句话“好记性不如烂笔头”,那就记录一下都遇到了些什么问题以及一些用法吧。
Yiiven
2022/12/15
2.9K0
React基础语法02-onKeyUp键盘事件
3:继续实现 按回车键的时候,拿到值,首先监听KeyUp或者KeyDown事件,进行判断,当keyCode==13的时候,表示键盘按下,获取值。
王小婷
2019/11/10
3K0
React基础语法02-onKeyUp键盘事件
layui弹窗间的传值(layui弹出层传值)(窗口传值)[通俗易懂]
主要有两部分 1、从主窗口传值到弹出层 2、从弹出层传值到主窗口 3、通过session互传 4、通过调用父窗口的函数从而获取到父窗口的值(相反也是可以的)
全栈程序员站长
2022/07/01
7.8K0
layui弹窗间的传值(layui弹出层传值)(窗口传值)[通俗易懂]
javaScript事件处理
JS事件指再浏览器窗体或者HTML元素上发生的,乐意触发JS代码块运行的行为,下面,我们一起来看看相关事件。
花狗Fdog
2020/11/24
2.5K0
javaScript事件处理
深入理解浏览器事件模型的概念和原理
大家好,我是腾讯云开发者社区的 Front_Yue,本篇文章将带领大家深入探讨浏览器事件模型的概念和原理
Front_Yue
2024/01/29
8341
深入理解浏览器事件模型的概念和原理
JS-事件之鼠标、键盘都能控制的下拉选框效果
<script type="text/javascript"> window.onload=function(e){ var box=document.getElementById('divselect'), title=box.getElementsByTagName('cite')[0], menu=box.getElementsByTagName('ul')[0], as=box.getElementsByTagName('a'),//as是一个
xing.org1^
2018/05/17
3.4K0
Layui 弹出框
layui.use('layer', function(){ var layer = layui.layer;
用户5760343
2019/10/25
4.6K0
Vue.js快速入门
在监听键盘事件时,我们经常需要监测常见的键值 vue 定义了一些按键修饰符, 可以直接使用监听,不需要再判断keycode
JokerDJ
2023/11/27
2140
Vue.js快速入门
layui小问题
解决办法:把<button></button>标签改为<input type="button">或者在<button>中添加属性 type="button"
生南星
2020/02/13
1.8K0
layui小问题
从零开始学VUE之模板语法(事件监听)
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation()。
彼岸舞
2021/06/07
2.2K0
从零开始学VUE之模板语法(事件监听)
react 监听键盘事件 hook
import { useCallback, useEffect, MutableRefObject } from "react"; type keyType = KeyboardEvent["keyCode"] | KeyboardEvent["key"]; type keyFilter = keyType | Array<keyType>; type EventHandler = (event: KeyboardEvent) => void; type keyEvent = "keydown" | "k
小鑫
2022/04/25
2.3K0
JavaScript——DOM事件高级
此方法将指定的监听器注册到eventTarger(目标对象)上,当该对象触发指定的事件时,就会执行事件处理函数。
岳泽以
2022/10/26
1.9K0
JavaScript——DOM事件高级
layui与VFP搭配完成单表增删查改,勇于尝试才好玩
由职业前端倾情打造,面向全层次的前后端开发者,易上手开源免费的 Web UI 组件库
加菲猫的VFP
2024/02/27
2020
layui与VFP搭配完成单表增删查改,勇于尝试才好玩
JS快速入门(二)
和 innerHTML 类似,写入内容如果包含 html 标签字符串,会被解析成对应的 html 标签,document.write()根据运行时机,会写入文档不同的位置
HammerZe
2022/03/24
6.8K0
JS快速入门(二)
layui 表格绑定删除、批量删除、增加的操作jscontroller
js layui.config({ version: '1560414887155' //为了更新 js 缓存,可忽略 }); layui.use(['layda
用户5899361
2020/12/07
3.7K1
JS实现动态获取当前点击事件的id属性值
这段时间一直在写java期末项目作业,然后自己打算把影视站用java实现出来,前端用ajax调用进行填充,然后一直困惑我的问题在此时此刻终于解决,本来是前端做的事,像我这个前端菜B来说,这个问题真是难了我一下午加一个晚上,不过还好解决了,特此记录一下。
Lcry
2022/11/29
27.2K0
JS实现动态获取当前点击事件的id属性值
相关推荐
LayUI树形表格treetable使用详解
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验