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自帶的,根據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);

//可執行確定按鈕事件並把備注信息(即多行文本框值)存入需要的地方

    }

});

效果如下:

 

 

 

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM