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.GetAllChild(element,deep,condition)使用介绍
Sep 21 Javascript
table insertRow、deleteRow定义和用法总结
May 14 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
Mar 05 Javascript
javascript实现base64 md5 sha1 密码加密
Sep 09 Javascript
Javascript动画效果(1)
Oct 11 Javascript
AngularJS动态加载模块和依赖的方法分析
Nov 08 Javascript
Jquery树插件zTree实现菜单树
Jan 24 Javascript
Vue.js结合bootstrap实现分页控件
Mar 10 Javascript
如何让你的JS代码更好看易读
Dec 01 Javascript
Vue DevTools调试工具的使用
Dec 05 Javascript
微信小程序接入腾讯云验证码的方法步骤
Jan 07 Javascript
JS setTimeout与setInterval的区别
Apr 20 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
[IE&FireFox兼容]JS对select操作
2007/01/07 Javascript
javascript奇异的arguments分析
2010/10/20 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
2011/11/19 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
2012/03/14 Javascript
jQuery ajax调用WCF服务实例
2014/07/16 Javascript
使用react-router4.0实现重定向和404功能的方法
2017/08/28 Javascript
微信小程序如何获取用户手机号
2018/01/26 Javascript
vue-cli初始化项目中使用less的方法
2018/08/09 Javascript
详解Vue中组件的缓存
2019/04/20 Javascript
nodejs中request库使用HTTPS代理的方法
2019/04/30 NodeJs
微信小程序云开发实现云数据库读写权限
2019/05/17 Javascript
详解微信小程序开发之formId使用(模板消息)
2019/08/27 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
2019/09/01 Javascript
javascript简单实现深浅拷贝过程详解
2019/10/08 Javascript
jQuery操作元素追加内容示例
2020/01/10 jQuery
详解vue中v-bind:style效果的自定义指令
2020/01/21 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
JS实现无限轮播无倒退效果
2020/09/21 Javascript
Js实现粘贴上传图片的原理及示例
2020/12/09 Javascript
python对象及面向对象技术详解
2016/07/19 Python
利用python程序生成word和PDF文档的方法
2017/02/14 Python
Python基于matplotlib绘制栈式直方图的方法示例
2017/08/09 Python
Python 虚拟空间的使用代码详解
2019/06/10 Python
python判断所输入的任意一个正整数是否为素数的两种方法
2019/06/27 Python
python 调试冷知识(小结)
2019/11/11 Python
python文件路径操作方法总结
2020/12/21 Python
澳大利亚的奢侈品牌:Oroton
2016/08/26 全球购物
专升本个人自我评价
2013/12/22 职场文书
承办会议欢迎词
2014/01/17 职场文书
保险内勤岗位职责
2014/04/05 职场文书
法定代表人授权委托书范文
2014/09/22 职场文书
2014年财务经理工作总结
2014/12/08 职场文书
建筑技术负责人岗位职责
2015/04/13 职场文书
2016年小学端午节活动总结
2016/04/01 职场文书
在vue中import()语法不能传入变量的问题及解决
2022/04/01 Vue.js
使用Mysql计算地址的经纬度距离和实时位置信息
2022/04/29 MySQL