layer系列之弹层layer.prompt
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.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相关推荐
- layer打开iframe弹层,传递与接收参数
打开iframe弹层,并接收操作传值: $(".btn-sel").click(function () {layer.open({btn: ['确定'],type: 2,title ...
- layer之弹层组件文档 layui.layer(v.1.9.0之后)
弹层组件文档 - layui.layer layer 至今仍作为 layui 的代表作,她的受众广泛并非偶然,而是这数年来的坚持.不弃的执念,将那些不屑的眼光转化为应得的尊重,不断完善和维护.不断建设 ...
- layer-v2.4弹层组件使用示例
弹出层layer的使用 Intro layer是一款web弹层组件,致力于服务各个水平段的开发人员.layer官网:http://layer.layui.com/ layer侧重于用户灵活的自定义,为 ...
- layui使用弹出层 关闭后弹层的内容又显示出来
1.layui的弹层插件 layer 使用 当弹层的内容很多时,可以先在页面上写好,一般是写在body里面,不要放在其他的div里面,防止弹层受到影响,使用方法: <div id=" ...
- layer php弹出层,layer官方演示与讲解(jQuery弹出层插件)
特别说明:事件需自己绑定,以下只展现调用代码. //初体验 layer.alert('内容') //第三方扩展皮肤 layer.alert('内容', { icon: 1, skin: 'layer- ...
- php layui弹出修改功能,非常好用的弹出层 layer,常用功能demo,快速上手!
功能强大,实用,操作方便,文档齐全. 参数灵活,丰富.可以作为开发项目的公共模块,多处使用. 老文档地址:http://layer.layui.com/api.html 已经停止维护 常用功能代码de ...
- layer重复弹出(layui弹层同时存在多个)的解决方法
layer重复弹出(layui弹层同时存在多个)的解决方法 参考文章: (1)layer重复弹出(layui弹层同时存在多个)的解决方法 (2)https://www.cnblogs.com/sird ...
- jQuery Layer 弹层组件
layer是一款近年来口碑非常不错的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 在与同类组件的比较中,layer总是能轻易获胜.她 ...
- layui如何存在多个弹窗_web前端:layer重复弹出(layui弹层同时存在多个)的解决方法...
layer,一个可以让你想到即可做到的web弹窗(层)解决方案(js组件),作者贤心(前端开发工程师).layer侧重于用户灵活的自定义,为不同人的使用习惯提供动力.其意义在于,可以让您的页面拥有更丰 ...
最新文章
- c语言 long和short区别,5分钟读懂Android 中的toast short 和long的区别
- js --- 递归结构图
- 魅族 C++ 微服务框架技术内幕揭秘
- react+ant design Breadcrumb面包屑组件
- LOJ #6280. 数列分块入门 4-分块(区间加法、区间求和)
- java 伪异步 netty,大话netty系列之--伪异步BIO
- 【转】更改远程桌面默认端口3389及删除远程桌面连接历史记录
- LeetCode 1869. 哪种连续子字符串更长
- python计算思维的概念_用Python学计算思维turtle详解
- 四元数左乘右乘_复数/四元数和转动/转动群
- 亲密关系沟通-【价值感】-确保价值感的沟通方法
- element table多选表格_element-ui 表格打印
- python pytz下载_python:pytz包安装问题:ImportError:没有名为pytz的模块
- vue组件中校验身份证号,手机号和邮箱
- arduino双按钮同时点灯
- Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
- EOS区块链浏览器:scaneos.io | EOS必备工具 |什么是区块链浏览器 | 怎么使用区块链浏览器
- [附源码]Python计算机毕业设计大学生健康管理系统的设计与实现
- EasyExcel实现表格导入导出
- Vue路由守卫(拦截)