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 相关文章推荐
XMLHTTPRequest的属性和方法简介
Nov 23 Javascript
js查错流程归纳
May 04 Javascript
浅谈JavaScript之事件绑定
Jul 08 Javascript
jQuery实现html元素拖拽
Jul 21 Javascript
javascript控制层显示或隐藏的方法
Jul 22 Javascript
详解JavaScript中localStorage使用要点
Jan 13 Javascript
Node.js+Express配置入门教程
May 19 Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 Javascript
JavaScript实现各种排序的代码详解
Aug 28 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 Javascript
Vue快速实现通用表单验证功能
Dec 05 Javascript
一起来看看Vue的核心原理剖析
Mar 24 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+xml编程之SimpleXML的应用实例
2015/01/24 PHP
PHP以json或xml格式返回请求数据的方法
2018/05/31 PHP
php实现微信企业转账功能
2018/10/02 PHP
实例讲解PHP验证邮箱是否合格
2019/01/28 PHP
PHP PDOStatement::debugDumpParams讲解
2019/01/30 PHP
Prototype Function对象 学习
2009/07/12 Javascript
jquery计算鼠标和指定元素之间距离的方法
2015/06/26 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
Django+Vue跨域环境配置详解
2018/07/06 Javascript
echarts设置图例颜色和地图底色的方法实例
2018/08/01 Javascript
vue中使用codemirror的实例详解
2018/11/01 Javascript
AngularJS上传文件的示例代码
2018/11/10 Javascript
webpack.DefinePlugin与cross-env区别详解
2020/02/23 Javascript
JavaScript计算出两个数的差值
2020/03/19 Javascript
VSCode插件安装完成后的配置(常用配置)
2020/08/24 Javascript
python实现类似ftp传输文件的网络程序示例
2014/04/08 Python
Python中getattr函数和hasattr函数作用详解
2016/06/14 Python
python数据分析数据标准化及离散化详解
2018/02/26 Python
Python之列表的插入&替换修改方法
2018/06/28 Python
python获取中文字符串长度的方法
2018/11/14 Python
python requests指定出口ip的例子
2019/07/25 Python
python Django编写接口并用Jmeter测试的方法
2019/07/31 Python
python将图片转base64,实现前端显示
2020/01/09 Python
关于TensorFlow新旧版本函数接口变化详解
2020/02/10 Python
python实现企业微信定时发送文本消息的实例代码
2020/11/25 Python
加拿大著名时装品牌:SOIA & KYO
2016/08/23 全球购物
Omio俄罗斯:一次搜索公共汽车、火车和飞机的机票
2018/11/17 全球购物
团支书的期末学习总结自我评价
2013/11/01 职场文书
五年级数学教学反思
2014/02/11 职场文书
高中军训感想300字
2014/03/04 职场文书
做一个有道德的人活动实施方案
2014/08/23 职场文书
优秀中职教师事迹材料
2014/08/26 职场文书
小学生光盘行动倡议书
2015/04/28 职场文书
离婚答辩状怎么写
2015/05/22 职场文书
vue整合百度地图显示指定地点信息
2022/04/06 Vue.js
HTML页面点击按钮关闭页面的多种方式
2022/12/24 HTML / CSS