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 相关文章推荐
html中table数据排序的js代码
Aug 09 Javascript
游览器中javascript的执行过程(图文)
May 20 Javascript
浅析JavaScript中的同名标识符优先级
Dec 06 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
Apr 12 Javascript
js实现延迟加载的方法
Jun 24 Javascript
JS中call/apply、arguments、undefined/null方法详解
Feb 15 Javascript
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
Sep 03 Javascript
vue interceptor 使用教程实例详解
Sep 13 Javascript
js图片查看器插件用法示例
Jun 22 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
详解实现vue的数据响应式原理
Jan 20 Vue.js
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
详解js异步文件加载器
2016/01/24 PHP
PHP获取路径和目录的方法总结【必看篇】
2017/03/04 PHP
11款基于Javascript的文件管理器
2009/10/25 Javascript
append和appendTo的区别以及appendChild用法
2013/12/24 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
2014/03/18 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
2015/08/26 Javascript
Bootstrap学习笔记之css组件(3)
2016/06/07 Javascript
JS实现HTML表格排序功能
2016/08/05 Javascript
JS简单设置下拉选择框默认值的方法
2016/08/20 Javascript
jQuery设置Easyui校验规则(推荐)
2016/11/21 Javascript
Google 爬虫如何抓取 JavaScript 的内容
2017/04/07 Javascript
JavaScript ES6中const、let与var的对比详解
2017/06/18 Javascript
vue proxyTable 接口跨域请求调试的示例
2017/09/12 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
2017/11/23 Javascript
javascript获取图片的top N主色值方法详解
2018/01/26 Javascript
[01:07:17]EG vs Optic Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
python中global与nonlocal比较
2014/11/21 Python
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
Python中单、双下划线的区别总结
2017/12/01 Python
Python 余弦相似度与皮尔逊相关系数 计算实例
2019/12/23 Python
Pandas 解决dataframe的一列进行向下顺移问题
2019/12/27 Python
浅谈tensorflow 中tf.concat()的使用
2020/02/07 Python
Python获取指定网段正在使用的IP
2020/12/14 Python
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
2017/08/18 HTML / CSS
美国饼干礼物和美食甜点购买网站:Cheryl’s
2020/05/28 全球购物
社会学专业学生职业规划书
2014/02/07 职场文书
监察局领导班子四风问题整改措施思想汇报
2014/10/05 职场文书
党员评议个人总结
2014/10/20 职场文书
成绩单评语
2015/01/04 职场文书
针对吵架老公保证书
2015/05/08 职场文书
2015国庆节66周年标语
2015/07/30 职场文书
高二数学教学反思
2016/02/18 职场文书
关于企业的执行力标语大全
2020/01/06 职场文书
MySQL主从复制断开的常用修复方法
2021/04/07 MySQL
redis数据一致性的实现示例
2022/03/18 Redis
vue+echarts实现多条折线图
2022/03/21 Vue.js