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 冒泡排序 正序和倒序实现代码
Dec 14 Javascript
JavaScript 一道字符串分解的题目
Aug 03 Javascript
用js模拟struts2的多action调用示例
May 19 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
Oct 16 Javascript
基于insertBefore制作简单的循环插空效果
Sep 21 Javascript
分享JS数组求和与求最大值的方法
Aug 11 Javascript
原生js简单实现放大镜特效
May 16 Javascript
JavaScript解析任意形式的json树型结构展示
Jul 23 Javascript
Vue.js移动端左滑删除组件的实现代码
Sep 08 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
Dec 03 Javascript
node.js通过url读取文件
Oct 16 Javascript
vue router-link 默认a标签去除下划线的实现
Nov 06 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多任务程序实例解析
2014/07/19 PHP
php json转换成数组形式代码分享
2014/11/10 PHP
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
LAMP环境使用Composer安装Laravel的方法
2017/03/25 PHP
php+laravel依赖注入知识点总结
2019/11/04 PHP
javascript实现焦点滚动图效果 具体方法
2013/06/24 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
jQuery 回调函数(callback)的使用和基础
2015/02/26 Javascript
基于javascript实现图片切换效果
2016/04/17 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
2016/05/18 Javascript
ES6中Generator与异步操作实例分析
2017/03/31 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
2017/06/11 Javascript
回顾Javascript React基础
2019/06/15 Javascript
element-ui 实现响应式导航栏的示例代码
2020/05/08 Javascript
基于PHP pthreads实现多线程代码实例
2020/06/24 Javascript
Openlayers实现地图全屏显示
2020/09/28 Javascript
Python基于Tkinter实现的记事本实例
2015/06/17 Python
python实现文件路径和url相互转换的方法
2015/07/06 Python
Python打印斐波拉契数列实例
2015/07/07 Python
Python中Django框架利用url来控制登录的方法
2015/07/25 Python
使用pyecharts在jupyter notebook上绘图
2020/04/23 Python
Django使用详解:ORM 的反向查找(related_name)
2018/05/30 Python
安装好Pycharm后如何配置Python解释器简易教程
2019/06/28 Python
django基于存储在前端的token用户认证解析
2019/08/06 Python
OpenCV4.1.0+VS2017环境配置的方法步骤
2020/07/09 Python
如何使用scrapy中的ItemLoader提取数据
2020/09/30 Python
Booking.com荷兰:全球酒店网上预订
2017/08/22 全球购物
美国迪克体育用品商店:DICK’S Sporting Goods
2018/07/24 全球购物
澳大利亚设计师服装在线:MISHA
2019/10/07 全球购物
老教师工作总结的自我评价
2013/09/27 职场文书
有趣的广告词
2014/03/18 职场文书
会计专业求职信
2014/08/10 职场文书
机动车登记业务委托书
2014/10/08 职场文书
借条如何写
2015/05/26 职场文书
2017元旦、春节期间廉洁自律承诺书
2016/03/25 职场文书
如何写一份具有法律效力的借款协议书?
2019/07/02 职场文书