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代码
May 22 Javascript
asm.js使用示例代码
Nov 28 Javascript
jquery实现html页面 div 假分页有原理有代码
Sep 06 Javascript
JavaScript编码风格指南(中文版)
Aug 26 Javascript
jQuery实现的瀑布流加载效果示例
Sep 13 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
Nov 16 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
Feb 13 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
Aug 07 Javascript
vue实现的树形结构加多选框示例
Feb 02 Javascript
微信小程序bindtap事件与冒泡阻止详解
Aug 08 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
Aug 28 Javascript
javascript中layim之查找好友查找群组
Feb 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 上传文件类型判断函数(避免上传漏洞 )
2010/06/08 PHP
Drupal7连接多个数据库及常见问题解决
2014/03/02 PHP
ThinkPHP之foreach标签使用概述
2014/06/30 PHP
php编写批量生成不重复的卡号密码代码
2015/05/14 PHP
php防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
Yii CGridView用法实例详解
2016/07/12 PHP
PHP中将一个字符串部分字符用星号*替代隐藏的实现代码
2019/09/08 PHP
laravel框架实现敏感词汇过滤功能示例
2020/02/15 PHP
PHP语言对接抖音快手小红书视频/图片去水印API接口源码
2020/08/11 PHP
更正确的asp冒泡排序
2007/05/24 Javascript
javascript 解析url的search方法
2010/02/09 Javascript
extJs 下拉框联动实现代码
2010/04/09 Javascript
JQuery获取文本框中字符长度的代码
2011/09/29 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
2012/07/17 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
2012/12/23 Javascript
动态加载js的方法汇总
2015/02/13 Javascript
jquery实现叠层3D文字特效代码分享
2015/08/21 Javascript
通用javascript代码判断版本号是否在版本范围之间
2015/11/29 Javascript
Knockout自定义绑定创建方法
2015/12/26 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
2016/06/28 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
2016/12/13 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
2017/04/28 Javascript
Node.js+Express+MySql实现用户登录注册功能
2017/07/10 Javascript
讲解vue-router之什么是嵌套路由
2018/05/28 Javascript
React Component存在的几种形式详解
2018/11/06 Javascript
javascript json对象小技巧之键名作为变量用法分析
2019/11/11 Javascript
jQuery实现简易聊天框
2020/02/08 jQuery
python获取android设备的GPS信息脚本分享
2015/03/06 Python
python图片二值化提高识别率代码实例
2019/08/24 Python
python中使用input()函数获取用户输入值方式
2020/05/03 Python
python numpy实现rolling滚动案例
2020/06/08 Python
会计学财务管理专业个人的自我评价
2013/10/19 职场文书
大学生职业规划论文
2014/01/11 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书
vue中 this.$set的使用详解
2021/11/17 Vue.js
Mysql中@和@@符号的详细使用指南
2022/06/05 MySQL