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 相关文章推荐
Javascript学习笔记-详解in运算符
Sep 13 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
Apr 10 Javascript
jquery下div 的resize事件示例代码
Mar 09 Javascript
input标签内容改变的触发事件介绍
Jun 18 Javascript
Jquery响应回车键直接提交表单操作代码
Jul 25 Javascript
javascript 闭包详解及简单实例应用
Dec 31 Javascript
利用jsonp与代理服务器方案解决跨域问题
Sep 14 Javascript
JQuery 又谈ajax局部刷新
Nov 27 jQuery
vue实现在表格里,取每行的id的方法
Mar 09 Javascript
浅谈webpack组织模块的原理
Mar 10 Javascript
vue动态子组件的两种实现方式
Sep 01 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
Jul 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实现登陆模块功能示例
2016/10/20 PHP
Javascript 中的类和闭包
2010/01/08 Javascript
ToolTips JQEURY插件之简洁小提示框效果
2011/11/19 Javascript
Java File类的常用方法总结
2015/03/18 Javascript
分享一个插件实现水珠自动下落效果
2016/06/01 Javascript
javascript中的 object 和 function小结
2016/08/14 Javascript
jQuery基于BootStrap样式实现无限极地区联动
2016/08/26 Javascript
jQuery弹出遮罩层效果完整示例
2016/09/13 Javascript
JavaScript触发onScroll事件的函数节流详解
2016/12/14 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
2017/01/08 Javascript
requirejs按需加载angularjs文件实例
2017/06/08 Javascript
vue中post请求以a=a&b=b 的格式写遇到的问题
2018/04/27 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
JavaScript中的回调函数实例讲解
2019/01/27 Javascript
小程序实现悬浮搜索框
2019/07/12 Javascript
Nuxt使用Vuex的方法示例
2019/09/06 Javascript
Element-UI 使用el-row 分栏布局的教程
2020/10/26 Javascript
[46:47]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS NE
2014/05/22 DOTA
[59:30]完美世界DOTA2联赛PWL S3 access vs LBZS 第二场 12.20
2020/12/23 DOTA
zbar解码二维码和条形码示例
2014/02/07 Python
python使用opencv进行人脸识别
2017/04/07 Python
Python操作MySQL模拟银行转账
2018/03/12 Python
Django异步任务之Celery的基本使用
2019/03/23 Python
Python使用import导入本地脚本及导入模块的技巧总结
2019/08/07 Python
详解Matplotlib绘图之属性设置
2019/08/23 Python
Pandas 缺失数据处理的实现
2019/11/04 Python
Python实现数值积分方式
2019/11/20 Python
python开发实例之Python的Twisted框架中Deferred对象的详细用法与实例
2020/03/19 Python
Python关于拓扑排序知识点讲解
2021/01/04 Python
Html5实现单张、多张图片上传功能
2019/04/28 HTML / CSS
使用html5制作loading图的示例
2014/04/14 HTML / CSS
Marc Jacobs官方网站:美国奢侈品牌
2017/08/29 全球购物
大学生交通专业求职信
2014/09/01 职场文书
2015年全国科普日活动总结
2015/03/23 职场文书
2015年仓库管理员工作总结
2015/04/21 职场文书
Win11无法访问设备和打印机 如何解决页面空白
2022/04/09 数码科技