layer.prompt添加多個輸入框

原文鏈接:https://www.jianshu.com/p/65fea33e6750

我們都知道layer.prompt官網上的例子是一個彈出框，那么有沒有可能出來多個呢，當然是可以的

1.首先增加需要的輸入框

源碼不好改動，咱們可以直接js增加呀，$().append()方法還是很好用的
話不多說上代碼

layer.prompt({ formType: 2, placeholder: '輸入注銷原因', title: '請輸入值', // area: ['800px', '350px'] //自定義文本域寬高 }, function(value, index, elem){ // alert(value); //得到value layer.close(index); }); 

這個是官網上的例子相比都可以找得到，想要動態加入內容，首先咱需要找准目標，瀏覽器調試工具走起

 

 

image.png

可以發現代碼時分的簡潔，這樣就更好添加了
這樣動態增加的代碼也就出來了

$(".layui-layer-content").append("<br/><input type=\"text\" id= \"zxr\" class=\"layui-input\" placeholder=\"輸入注銷人\"/>") 

這里我增加了一個<input>輸入框，給了一個id這樣使用的時候可以找的到，class就不要起名和自帶的一樣了，這里我用了一個layui的表單的元素，具體啥原因下邊分析到點擊確定的回調會說明。但是鑒於沒有<form>標簽包裹 應該然並卵。但是為了美觀還是中間空了一行，看看結果啥樣吧

 

image.png

 

可以發現鮮果還是不錯的，但是我感覺上邊的<textarea>中的value屬性不好，客戶要填寫時還得刪除，如果能像下邊的<input>標簽就好了，不過查閱了API沒有這么個屬性，得嘞，修改下代碼吧。

2.增加placeholder屬性

由於js文件都是壓縮的，咱們可以使用IDE格式化一下，要不然頭都大了。
代碼如下

 

image.png

 

稍微分析下，我們找到了主要的添加dom內容的代碼

l = 2 == e.formType ? '<textarea class="layui-layer-input"' + a + ">" + (e.value || "") + "</textarea>" : function () { return '<input type="' + (1 == e.formType ? "password" : "text") + '" class="layui-layer-input" value="' + (e.value || "") + '">' }() 

大概是說(本人js比較渣)：如果formType屬性值為2添加<textarea>標簽，否則調用一個函數，當然這個函數也是為了返回其他的情況下的<input>標簽,那咱都給添加下吧

添加的代碼如下：

placeholder="'+(e.placeholder || '')+'"

然后形成的代碼像這個樣子

 

 

image.png

代碼好些 主要就是看清楚這復雜的雙引號和單引號
這樣咱們就可以修改前端的代碼了

layer.prompt({ formType: 2, placeholder: '輸入注銷原因', title: '請輸入值', // area: ['800px', '350px'] //自定義文本域寬高 }, function(value, index, elem){ // alert(value); //得到value layer.close(index); }); $(".layui-layer-content").append("<br/><input type=\"text\" id= \"zxr\" class=\"layui-input\" placeholder=\"輸入注銷人\"/>") 

頁面效果如下圖

 

 

image.png

OK 大功告成。不過又出現了個問題，本來咋樣也該給咱個值的吧，但是沒填寫的時候發現，啥反應都沒有，
代碼如下：

function(value, index, elem){ /* if(value===""){ layer.msg("請填寫注銷原因") return; } */ if($('#zxr').val()===""){ layer.tips("請填寫注銷人",$('#zxr')); return; } // alert(value); //得到value layer.close(index); } 

這就尷尬了，控制台也沒出錯，應該是代碼的問題了。

3.修改未填寫時的提示方式

再次找到剛才的那部分代碼：
就是這段yes函數了，

yes: function (i) { var n = s.val(); "" === n ? s.focus() : n.length > (e.maxlength || 500) ? r.tips("最多输入" + (e.maxlength || 500) + "个字数", s, {tips: 1}) : t && t(n, i, s) } 

握草，原來為空的時候，就直接s.focus()了，這個s，從上邊可以找到就是

success: function (e) { s = e.find(".layui-layer-input"), s.focus(), "function" == typeof f && f(e) } 

就是自動添加的那個輸入框嘛，這也就是咱們自己添加的輸入框的class不用layui-layer-input的原因了，而且可以看出來這個success函數就是頁面加載好執行的，這樣咱們其實也可以將添加自定義的輸入框的方法寫在success這個屬性中。這里就不試了，見好就好哈哈。

回到正題，既然找到了，就修改下等於空時的函數吧，就在旁邊出來個tip吧。
修改后的代碼如下：

"" === n ? layer.tips(e.placeholder||'請填寫內容',s) : n.length > (e.maxlength || 500) ? r.tips("最多输入" + (e.maxlength || 500) + "个字数", s, {tips: 1}) : t && t(n, i, s) 

主要就是這段了

layer.tips(e.placeholder||'請填寫內容',s) 

也可以專門寫個屬性，設置沒填寫的提示。

完整頁面代碼如下：

layer.prompt({ formType: 2, placeholder: '輸入注銷原因', title: '請輸入值', // area: ['800px', '350px'] //自定義文本域寬高 }, function(value, index, elem){ /* if(value===""){ layer.msg("請填寫注銷原因") return; } */ if($('#zxr').val()===""){ layer.tips("請填寫注銷人",$('#zxr')); return; } // alert(value); //得到value layer.close(index); }); $(".layui-layer-content").append("<br/><input type=\"text\" id= \"zxr\" class=\"layui-input\" placeholder=\"輸入注銷人\"/>") 

頁面效果如下：

 

 

image.png

 

 

image.png

然后再寫其他邏輯就可以啦

 

 

2人點贊

 

layui