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脚本函数库 方便开发
Oct 13 Javascript
JS中toFixed()方法引起的问题如何解决
Nov 20 Javascript
JS Replace()的高级使用方法介绍
Jun 29 Javascript
一个JavaScript操作元素定位元素的实例
Oct 29 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
Aug 10 Javascript
利用node.js如何搭建一个简易的即时响应服务器
May 28 Javascript
Angularjs的启动过程分析
Jul 18 Javascript
关于vue编译版本引入的问题的解决
Sep 17 Javascript
微信小程序全局变量功能与用法详解
Jan 22 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
Jan 14 Javascript
vue-router 路由传参用法实例分析
Mar 06 Javascript
JavaScript中使用Spread运算符的八种方法总结
Jun 18 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中常用数组处理方法实例分析
2008/08/30 PHP
PHP print类函数使用总结
2010/06/25 PHP
php 无法加载mcrypt.dll的解决办法
2013/04/03 PHP
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
php实现根据字符串生成对应数组的方法
2014/09/22 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
jquery中eq和get的区别与使用方法
2011/04/14 Javascript
js键盘上下左右键怎么触发function(实例讲解)
2013/12/14 Javascript
JS实现很酷的水波文字特效实例
2015/02/26 Javascript
使用JavaScript实现ajax的实例代码
2016/05/11 Javascript
Javascript typeof与instanceof的区别
2016/10/18 Javascript
学习使用bootstrap的modal和carousel
2016/12/09 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
2017/01/21 Javascript
Javascript网页抢红包外挂实现分享
2018/01/11 Javascript
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
vue favicon设置以及动态修改favicon的方法
2018/12/21 Javascript
JavaScript中的"=、==、==="区别讲解
2019/01/22 Javascript
vue双向绑定及观察者模式详解
2019/03/19 Javascript
Vue3不支持Filters过滤器的问题
2020/09/24 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 战前探营!
2014/05/21 DOTA
[17:13]DOTA2 HEROS教学视频教你分分钟做大人-斯拉克
2014/06/13 DOTA
[46:20]TFT vs Secret Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python中__new__与__init__方法的区别详解
2015/05/04 Python
深入理解Django的自定义过滤器
2017/10/17 Python
用tensorflow构建线性回归模型的示例代码
2018/03/05 Python
django2+uwsgi+nginx上线部署到服务器Ubuntu16.04
2018/06/26 Python
selenium+python自动化测试之鼠标和键盘事件
2019/01/23 Python
Python面向对象中类(class)的简单理解与用法分析
2020/02/21 Python
Python基于codecs模块实现文件读写案例解析
2020/05/11 Python
手把手教你用Django执行原生SQL的方法
2021/02/18 Python
CSS3旋转——彩色扇子兼容firefox浏览器
2013/06/04 HTML / CSS
祖国在我心中演讲稿300字
2014/05/04 职场文书
医院信息公开实施方案
2014/05/09 职场文书
Lombok的详细使用及优缺点总结
2021/07/15 Java/Android
梳理总结Python开发中需要摒弃的18个坏习惯
2022/01/22 Python