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 相关文章推荐
一段批量给页面上的控件赋值js
Jun 19 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
Mar 17 Javascript
JS实现文件动态顺序载入的方法
Mar 07 Javascript
jQuery的基本概念与高级编程
May 14 Javascript
jQuery基于ajax实现星星评论代码
Aug 07 Javascript
js实现纯前端的图片预览
Apr 27 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
Aug 29 Javascript
用jquery快速解决IE输入框不能输入的问题
Oct 04 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
Jan 18 Javascript
原生node.js案例--前后台交互
Feb 20 Javascript
在layui中layer弹出层点击事件无效的解决方法
Sep 05 Javascript
Vue看了就会的8个小技巧
Jan 21 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
php DOS攻击实现代码(附如何防范)
2012/05/29 PHP
js option删除代码集合
2008/11/12 Javascript
XmlUtils JS操作XML工具类
2009/10/01 Javascript
Javascript实现CheckBox的全选与取消全选的代码
2010/07/20 Javascript
jquery 使用简明教程
2014/03/05 Javascript
js闭包实例汇总
2014/11/09 Javascript
详解AngularJS中的表达式使用
2015/06/16 Javascript
jquery获取img的src值的简单实例
2016/05/17 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
2016/06/07 Javascript
JS动态加载脚本并执行回调操作
2016/08/24 Javascript
ES6中Iterator与for..of..遍历用法分析
2017/03/31 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
详解vue添加删除元素的方法
2018/06/30 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
小程序转发探索示例
2019/02/19 Javascript
Vue项目history模式下微信分享爬坑总结
2019/03/29 Javascript
浅谈react-router@4.0 使用方法和源码分析
2019/06/04 Javascript
JS监听组合按键思路及实现过程
2020/04/17 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
2020/05/20 Javascript
vue路由切换时取消之前的所有请求操作
2020/09/01 Javascript
原生js实现弹窗消息动画
2020/11/20 Javascript
python通过pil将图片转换成黑白效果的方法
2015/03/16 Python
怎么使用pipenv管理你的python项目
2018/03/12 Python
numpy向空的二维数组中添加元素的方法
2018/11/01 Python
Python3中lambda表达式与函数式编程讲解
2019/01/14 Python
Django之form组件自动校验数据实现
2020/01/14 Python
tensorflow 报错unitialized value的解决方法
2020/02/06 Python
Python3之外部文件调用Django程序操作model等文件实现方式
2020/04/07 Python
美国孕妇装品牌:Destination Maternity
2018/02/04 全球购物
客户代表实习人员自我鉴定
2013/09/27 职场文书
农救科工作职责
2013/11/27 职场文书
冬季施工防火方案
2014/05/17 职场文书
护士节活动总结
2014/08/29 职场文书
争当四好少年演讲稿
2014/09/13 职场文书
手机被没收的检讨书
2014/10/04 职场文书
推广普通话主题班会
2015/08/17 职场文书