layer官网:https://www.layui.com/doc/modules/layer.html

layer在线调试:http://layer.layui.com/

如何使用layer.prompt在输入值为空的情况下点击确定继续执行逻辑?

使用layer.open实现方式:

附:源码如下

layer.open({
//formType: 2,//这里依然指定类型是多行文本框,但是在下面content中也可绑定多行文本框
title: '是否确信将账号临时挂账?',
area: ['300px', '240px'],
btnAlign: 'c',
closeBtn:'1',//右上角的关闭
content: `<div><p>备注:</p><textarea name="txt_remark" id="remark" style="width:200px;height:80px;"></textarea></div>`,
btn:['确认','取消','关闭'],
yes: function (index, layero) {
var value1 = $('#remark').val();//获取多行文本框的值
alert('您刚才输入了:' + value1);
layer.close(index);

//可执行确定按钮事件并把备注信息(即多行文本框值)存入需要的地方

},
no:function(index)
{

alert('您刚才点击了取消按钮');
layer.close(index);

return false;//点击按钮按钮不想让弹层关闭就返回false

},
close:function(index)
{
alert('您刚才点击了关闭按钮');

return false;//点击按钮按钮不想让弹层关闭就返回false
}

});

附:layer.open中按钮点击事件:

layer.open({
content: 'test'
,btn: ['按钮一', '按钮二', '按钮三']
,yes: function(index, layero){
//按钮【按钮一】的回调
},btn2: function(index, layero){
//按钮【按钮二】的回调
alert('这是点击了按钮二');
return false;//点击后不关闭窗口,需返回false
},btn3: function(index, layero){
//按钮【按钮三】的回调
alert('这是点击了按钮三');
return false;//点击后不关闭窗口,需返回false
}
,cancel: function(){
//右上角关闭回调
}
});

用layer.open可以实现弹出文本框及按钮事件,layer.prompt也是在layer.open基础上的封装.....

使用layer.prompt时,

如果文本框输入值是空的话点击确定没有反应,不能向下执行。

但是我又需要在这种情况下去继续执行判断或逻辑时该怎么做??

注:使用layer.prompt时,layer使用的版本为layer-v3.0

官方代码说明如下:

//prompt层新定制的成员如下
{
formType: 1, //输入框类型,支持0(文本)默认1(密码)2(多行文本)
value: '', //初始时的值,默认空字符
maxlength: 140, //可输入文本的最大长度,默认500
}

//例子1
layer.prompt(function(value, index, elem){
alert(value); //得到value
layer.close(index);
});

//例子2
layer.prompt({
formType: 2,
value: '初始值',
title: '请输入值',
area: ['800px', '350px'] //自定义文本域宽高
}, function(value, index, elem){
alert(value); //得到value
layer.close(index);
});

示例代码如下

layer.prompt({

formType:2,

title:'请填写排除原因(注:必填项)',

area:['500px','150px'],

btnAlign:'c'

},function(value,index,elem){

alert(value);

laker.close(index);

});

由官网查看文档可知layer.prompt也是继承layer.open的,所以改成如下所示:

layer.prompt({

     formType:  2 ,
     title:  '请填写排除原因(注:必填项)' ,
     area: [ '500px' '150px' ],
     btnAlign:  'c' ,
     yes: function(index, layero){
         // 获取文本框输入的值
         var value = layero.find( ".layui-layer-input" ).val();
         if  (value) {
             alert( "输入值为:"  + value);
             layer.close(index);
         else  {
             alert( "输入值为空!" );
         }
     }
});

说明:以上弹出的文本框是layer自带的,根据formType指定的,如果自己绑定文本框则可如下尝试:

layer.prompt({
formType: 2,//这里依然指定类型是多行文本框,但是在下面content中也可绑定多行文本框
title: '是否确信将账号临时挂账?',
area: ['300px', '100px'],
btnAlign: 'c',
content: `<div><p>备注:</p><textarea name="txt_remark" id="remark" style="width:200px;height:80px;"></textarea></div>`,
yes: function (index, layero) {
var value1 = $('#remark').val();//获取多行文本框的值
alert('您刚才输入了:' + value1);

//可执行确定按钮事件并把备注信息(即多行文本框值)存入需要的地方

}

});

效果如下:

转载于:https://www.cnblogs.com/newcapecjmc/p/11471242.html

layer系列之弹层layer.prompt相关推荐

  1. layer打开iframe弹层,传递与接收参数

    打开iframe弹层,并接收操作传值: $(".btn-sel").click(function () {layer.open({btn: ['确定'],type: 2,title ...

  2. layer之弹层组件文档 layui.layer(v.1.9.0之后)

    弹层组件文档 - layui.layer layer 至今仍作为 layui 的代表作,她的受众广泛并非偶然,而是这数年来的坚持.不弃的执念,将那些不屑的眼光转化为应得的尊重,不断完善和维护.不断建设 ...

  3. layer-v2.4弹层组件使用示例

    弹出层layer的使用 Intro layer是一款web弹层组件,致力于服务各个水平段的开发人员.layer官网:http://layer.layui.com/ layer侧重于用户灵活的自定义,为 ...

  4. layui使用弹出层 关闭后弹层的内容又显示出来

    1.layui的弹层插件  layer 使用 当弹层的内容很多时,可以先在页面上写好,一般是写在body里面,不要放在其他的div里面,防止弹层受到影响,使用方法: <div id=" ...

  5. layer php弹出层,layer官方演示与讲解(jQuery弹出层插件)

    特别说明:事件需自己绑定,以下只展现调用代码. //初体验 layer.alert('内容') //第三方扩展皮肤 layer.alert('内容', { icon: 1, skin: 'layer- ...

  6. php layui弹出修改功能,非常好用的弹出层 layer,常用功能demo,快速上手!

    功能强大,实用,操作方便,文档齐全. 参数灵活,丰富.可以作为开发项目的公共模块,多处使用. 老文档地址:http://layer.layui.com/api.html 已经停止维护 常用功能代码de ...

  7. layer重复弹出(layui弹层同时存在多个)的解决方法

    layer重复弹出(layui弹层同时存在多个)的解决方法 参考文章: (1)layer重复弹出(layui弹层同时存在多个)的解决方法 (2)https://www.cnblogs.com/sird ...

  8. jQuery Layer 弹层组件

    layer是一款近年来口碑非常不错的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 在与同类组件的比较中,layer总是能轻易获胜.她 ...

  9. layui如何存在多个弹窗_web前端:layer重复弹出(layui弹层同时存在多个)的解决方法...

    layer,一个可以让你想到即可做到的web弹窗(层)解决方案(js组件),作者贤心(前端开发工程师).layer侧重于用户灵活的自定义,为不同人的使用习惯提供动力.其意义在于,可以让您的页面拥有更丰 ...

最新文章

  1. c语言 long和short区别,5分钟读懂Android 中的toast short 和long的区别
  2. js --- 递归结构图
  3. 魅族 C++ 微服务框架技术内幕揭秘
  4. react+ant design Breadcrumb面包屑组件
  5. LOJ #6280. 数列分块入门 4-分块(区间加法、区间求和)
  6. java 伪异步 netty,大话netty系列之--伪异步BIO
  7. 【转】更改远程桌面默认端口3389及删除远程桌面连接历史记录
  8. LeetCode 1869. 哪种连续子字符串更长
  9. python计算思维的概念_用Python学计算思维turtle详解
  10. 四元数左乘右乘_复数/四元数和转动/转动群
  11. 亲密关系沟通-【价值感】-确保价值感的沟通方法
  12. element table多选表格_element-ui 表格打印
  13. python pytz下载_python:pytz包安装问题:ImportError:没有名为pytz的模块
  14. vue组件中校验身份证号,手机号和邮箱
  15. arduino双按钮同时点灯
  16. Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
  17. EOS区块链浏览器:scaneos.io | EOS必备工具 |什么是区块链浏览器 | 怎么使用区块链浏览器
  18. [附源码]Python计算机毕业设计大学生健康管理系统的设计与实现
  19. EasyExcel实现表格导入导出
  20. Vue路由守卫(拦截)

热门文章

  1. 无人机学习笔记之电机篇
  2. Type-C转HDMI线究竟有何妙用?乐得瑞Type-c转HDMI方案讲述
  3. java RSA加密算法
  4. 犀牛书作者:最该忘记的JavaScript特性
  5. 如何将QSFP+端口转换为SFP+端口?
  6. android 4.0以上系统如何实现自动接听电话
  7. 微信订单管理小程序开发制作
  8. 比较 Solaris、Linux 和 FreeBSD 内核(转)
  9. 电脑怎么使用打印机匿名共享
  10. 迅雷+小米=现象级区块链应用?