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的gzip静态压缩方法
Jan 05 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
Sep 30 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
Aug 02 Javascript
动态标签 悬停效果 延迟加载示例代码
Nov 21 Javascript
Javascript与jQuery方法的隐藏与显示
Jan 19 Javascript
javascript获取文档坐标和视口坐标
May 26 Javascript
javascript实现获取浏览器版本、浏览器类型
Dec 02 Javascript
vue.js入门教程之计算属性
Sep 01 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
Nov 05 Javascript
谈谈第三方App接入微信登录 解读
Dec 27 Javascript
vue mounted组件的使用
Jun 18 Javascript
vue.js使用v-if实现显示与隐藏功能示例
Jul 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--用万网的接口实现域名查询功能
2012/12/13 PHP
如何使用PHP计算上一个月的今天
2013/05/23 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
PHP+ajax实现二级联动菜单功能示例
2018/08/10 PHP
Javascript 八进制转义字符(8进制)
2011/04/08 Javascript
Javascript面向对象扩展库代码分享
2012/03/27 Javascript
javascript 使用for循环时该注意的问题-附问题总结
2015/08/19 Javascript
JavaScript正则表达式实例详解
2016/10/16 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
2017/09/14 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
2018/04/03 Javascript
vue组件实践之可搜索下拉框功能
2018/11/25 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
解决layui表格的表头不滚动的问题
2019/09/04 Javascript
HTML+JavaScript实现扫雷小游戏
2019/09/30 Javascript
JavaScript判断数据类型有几种方法及区别介绍
2020/09/02 Javascript
JS实现多功能计算器
2020/10/28 Javascript
JS闭包原理及其使用场景解析
2020/12/03 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
2021/02/06 Javascript
从Python的源码浅要剖析Python的内存管理
2015/04/16 Python
python学生信息管理系统(完整版)
2020/04/05 Python
python 搭建简单的http server,可直接post文件的实例
2019/01/03 Python
Python sep参数使用方法详解
2020/02/12 Python
python GUI库图形界面开发之PyQt5开发环境配置与基础使用
2020/02/25 Python
Python读取ini配置文件传参的简单示例
2021/01/05 Python
css3进行截取替代js的substring
2013/09/02 HTML / CSS
澳大利亚有机化妆品网上商店:The Well Store
2020/02/20 全球购物
清洁工表扬信
2014/01/08 职场文书
中学教师自我鉴定
2014/02/07 职场文书
毕业实习评语
2014/02/10 职场文书
施工员岗位职责
2014/03/16 职场文书
《梅花魂》教学反思
2014/04/30 职场文书
2014财务年终工作总结
2014/12/08 职场文书
毕业纪念册寄语大全
2015/02/26 职场文书
招商银行收入证明
2015/06/17 职场文书
SQL Server中使用判断语句(IF ELSE/CASE WHEN )案例
2021/07/07 SQL Server