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);
//可執行確定按鈕事件並把備注信息(即多行文本框值)存入需要的地方
}
});
效果如下:



