layer的prompt弹出框,点击回车,触发确定事件的方法


Posted in Javascript onSeptember 06, 2019

做了个prompt弹出框,希望点击确定按钮的时候也能触发确定的事件,用户习惯的原因,在输入框输入框数据后,再重新拿起鼠标点击太麻烦,所以想着点击确定按钮触发事件。

layer.prompt({title: '请输入数据', formType: 1,
 // 这个是确定按钮的事件
 "success":function(){
 // 键盘事件,判断回车
 $("input.layui-layer-input").on('keydown',function(e){
  if (e.which == 13) {
  // 取输入框数据 和123456 比较
  if("123456" == $(this).val()){
  alert('你点击了回车按钮!');
  layer.close(1);
  }
     }
 });
 },
 // 点击确定按钮事件
 yes : function(){
 // 取输入框数据
 var pass =$(document.getElementsByClassName('layui-layer-input')[0]).val();
 if("123456" == pass){
  alert('你点击了确定按钮!');s
  layer.close(1);
 }
 }
 });

这个方法必须要有yes,下面一个是网上找的代码,不过不好用

layer.prompt({title: '请输入数据!', formType: 1,
 "success":function(){
 $("input.layui-layer-input").on('keydown',function(e){
 if (e.which == 13) {
  console.log(e.which);
  if("123456" == $(this).val()){
  alert('回车');
  layer.close(1);
  }
    } 
 });
 }}, 
 function(pass, index){
 console.log(index);
 if("123456" == pass){
 alert('确定按钮');
 }
 layer.close(index);
 });

这个方法之所以不行,是因为点击确定事件后,也会调用success的回调事件,而这个事件中this是不一样的,所以 $(this).val() 会报错,所以我采用的方法是把 确定按钮的回调事件单独写出来 (yes),这样就不会导致冲突了。

以上这篇layer的prompt弹出框,点击回车,触发确定事件的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery列表拖动排列(由项目提取相当好用)
Jun 17 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
Jan 09 Javascript
JavaScript中for循环的几种写法与效率总结
Feb 03 Javascript
JavaScript实现两个select下拉框选项左移右移
Mar 09 Javascript
ES6新特性七:数组的扩充详解
Apr 21 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
Aug 17 Javascript
详解AngularJS跨页面传值(ui-router)
Aug 23 Javascript
javascript Function函数理解与实战
Dec 01 Javascript
js实现一个简易计算器
Mar 30 Javascript
JavaScript在web自动化测试中的作用示例详解
Aug 25 Javascript
vue + elementUI实现省市县三级联动的方法示例
Oct 29 Javascript
解决ele ui 表格表头太长问题的实现
Nov 13 Javascript
vue按需加载实例详解
Sep 06 #Javascript
详解Nuxt.js中使用Element-UI填坑
Sep 06 #Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
Sep 06 #Javascript
Nuxt使用Vuex的方法示例
Sep 06 #Javascript
vue中input的v-model清空操作
Sep 06 #Javascript
nuxt框架中对vuex进行模块化设置的实现方法
Sep 06 #Javascript
layui 表格操作列按钮动态显示的实现方法
Sep 06 #Javascript
You might like
PHP 中文处理技巧
2010/04/25 PHP
php $_SERVER["REQUEST_URI"]获取值的通用解决方法
2010/06/21 PHP
PHP连接MongoDB示例代码
2012/09/06 PHP
Codeigniter校验ip地址的方法
2015/03/21 PHP
PHP实现的AES加密、解密封装类与用法示例
2018/08/02 PHP
VSCode+PHPstudy配置PHP开发环境的步骤详解
2020/08/20 PHP
JavaScript加密解密7种方法总结分析
2007/10/07 Javascript
判断JavaScript对象是否可用的最正确方法分析
2008/10/03 Javascript
javascript Array.sort() 跨浏览器下需要考虑的问题
2009/12/07 Javascript
使用jQuery的attr方法来修改onclick值
2014/07/07 Javascript
浅谈JavaScript异常处理语句
2015/06/26 Javascript
js+css实现文字散开重组动画特效代码分享
2015/08/21 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
2016/08/25 Javascript
一步步教你利用Canvas对图片进行处理
2017/09/19 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
2018/03/20 Javascript
javascript中如何判断类型汇总
2019/05/14 Javascript
vue在线动态切换主题色方案
2020/03/26 Javascript
Taro小程序自定义顶部导航栏功能的实现
2020/12/17 Javascript
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python中enumerate函数用法实例分析
2015/05/20 Python
python字典多键值及重复键值的使用方法(详解)
2016/10/31 Python
Python从使用线程到使用async/await的深入讲解
2018/09/16 Python
Python3之不使用第三方变量,实现交换两个变量的值
2019/06/26 Python
利用python实现周期财务统计可视化
2019/08/25 Python
canvas像素画板的实现代码
2018/11/21 HTML / CSS
HTML5实现移动端点击翻牌功能
2020/10/23 HTML / CSS
美国汽配连锁巨头Pep Boys官网:轮胎更换、汽车维修服务和汽车零部件
2017/01/14 全球购物
西班牙购买行李箱和背包网站:Maletas Greenwich
2019/10/08 全球购物
会计毕业生求职简历的自我评价
2013/10/20 职场文书
校班主任推荐信范文
2013/12/03 职场文书
安全大检查实施方案
2014/02/22 职场文书
民族团结演讲稿范文
2014/08/27 职场文书
艺术节开幕词
2015/01/28 职场文书
女人创业励志语录,句句蕴含能量,激发你的潜能
2019/08/20 职场文书
nginx简单配置多个server的方法
2021/03/31 Servers
python3实现Dijkstra算法最短路径的实现
2021/05/12 Python