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);
//可执行确定按钮事件并把备注信息（即多行文本框值）存入需要的地方
}
});
效果如下：
