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 相关文章推荐
Prototype使用指南之hash.js
Jan 10 Javascript
javascript 浏览器检测代码精简版
Mar 04 Javascript
javascript 保存文件到本地实现方法
Nov 29 Javascript
jquery中each遍历对象和数组示例
Aug 05 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
Oct 15 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
Dec 03 Javascript
原生JavaScript实现滚动条效果
Mar 24 Javascript
AngularJS ng-repeat数组有重复值的解决方法
Oct 23 Javascript
基于jQuery实现左侧菜单栏可折叠功能
Dec 27 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
May 31 Javascript
vue使用nprogress实现进度条
Dec 09 Javascript
WEB前端性能优化的7大手段详解
Feb 04 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/08/08 PHP
PHP Directory 函数的详解
2013/03/07 PHP
php+mysql数据库实现无限分类的方法
2014/12/12 PHP
PHP简单实现断点续传下载的方法
2015/09/25 PHP
PHP计算当前坐标3公里内4个角落的最大最小经纬度实例
2016/02/26 PHP
PHP Try-catch 语句使用技巧
2016/02/28 PHP
php简单压缩css样式示例
2016/09/22 PHP
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
2013/05/10 Javascript
js的window.showModalDialog及window.open用法实例分析
2015/01/29 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
AngularJS ionic手势事件的使用总结
2017/08/09 Javascript
详解React 在服务端渲染的实现
2017/11/16 Javascript
微信小程序实现折线图的示例代码
2019/06/07 Javascript
ES6顶层对象、global对象实例分析
2019/06/14 Javascript
Vue可自定义tab组件用法实例
2019/10/24 Javascript
JS面试题中深拷贝的实现讲解
2020/05/07 Javascript
Vue如何将页面导出成PDF文件
2020/08/17 Javascript
[36:33]Ti4 循环赛第四日 附加赛NEWBEE vs Mouz
2014/07/13 DOTA
[00:36]DOTA2风云人物相约完美“圣”典 12月17日不见不散
2016/11/30 DOTA
通过C++学习Python
2015/01/20 Python
python2.7的编码问题与解决方法
2016/10/04 Python
numpy中索引和切片详解
2017/12/15 Python
分享一下Python数据分析常用的8款工具
2018/04/29 Python
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
wxpython绘制圆角窗体
2019/11/18 Python
Jupyter notebook命令和编辑模式常用快捷键汇总
2020/11/17 Python
印度领先的在线时尚商店:Koovs
2016/08/28 全球购物
中国医药集团国药在线:国药网
2017/02/06 全球购物
丹尼尔惠灵顿手表天猫官方旗舰店:Daniel Wellington
2017/08/25 全球购物
机械系大学毕业生推荐信
2013/11/27 职场文书
竞选劳动委员演讲稿
2014/04/28 职场文书
三十年同学聚会感言
2015/07/30 职场文书
python解决12306登录验证码的实现
2021/04/18 Python
Python爬虫基础之爬虫的分类知识总结
2021/05/13 Python
如何解决.cuda()加载用时很长的问题
2021/05/24 Python