layui动态添加input_layer.prompt添加多个输入框
我們都知道layer.prompt官網(wǎng)上的例子是一個彈出框，那么有沒有可能出來多個呢，當(dāng)然是可以的
1.首先增加需要的輸入框
源碼不好改動，咱們可以直接js增加呀，$().append()方法還是很好用的
話不多說上代碼
layer.prompt({
formType: 2,
placeholder: '輸入注銷原因',
title: '請輸入值',
// area: ['800px', '350px'] //自定義文本域?qū)捀?/p>
}, function(value, index, elem){
// alert(value); //得到value
layer.close(index);
});
這個是官網(wǎng)上的例子相比都可以找得到，想要動態(tài)加入內(nèi)容，首先咱需要找準(zhǔn)目標(biāo)，瀏覽器調(diào)試工具走起
image.png
可以發(fā)現(xiàn)代碼時分的簡潔，這樣就更好添加了
這樣動態(tài)增加的代碼也就出來了
$(".layui-layer-content").append("")
這里我增加了一個輸入框，給了一個id這樣使用的時候可以找的到，class就不要起名和自帶的一樣了，這里我用了一個layui的表單的元素，具體啥原因下邊分析到點(diǎn)擊確定的回調(diào)會說明。但是鑒于沒有
標(biāo)簽包裹 應(yīng)該然并卵。但是為了美觀還是中間空了一行，看看結(jié)果啥樣吧image.png
可以發(fā)現(xiàn)鮮果還是不錯的，但是我感覺上邊的中的value屬性不好，客戶要填寫時還得刪除，如果能像下邊的標(biāo)簽就好了，不過查閱了API沒有這么個屬性，得嘞，修改下代碼吧。
2.增加placeholder屬性
由于js文件都是壓縮的，咱們可以使用IDE格式化一下，要不然頭都大了。
代碼如下
image.png
稍微分析下，我們找到了主要的添加dom內(nèi)容的代碼
l = 2 == e.formType ? '" + (e.value || "") + "" : function () {
return ''
}()
大概是說(本人js比較渣)：如果formType屬性值為2添加標(biāo)簽，否則調(diào)用一個函數(shù)，當(dāng)然這個函數(shù)也是為了返回其他的情況下的標(biāo)簽,那咱都給添加下吧
添加的代碼如下：
placeholder="'+(e.placeholder || '')+'"
然后形成的代碼像這個樣子
image.png
代碼好些 主要就是看清楚這復(fù)雜的雙引號和單引號
這樣咱們就可以修改前端的代碼了
layer.prompt({
formType: 2,
placeholder: '輸入注銷原因',
title: '請輸入值',
// area: ['800px', '350px'] //自定義文本域?qū)捀?/p>
}, function(value, index, elem){
// alert(value); //得到value
layer.close(index);
});
$(".layui-layer-content").append("")
頁面效果如下圖
image.png
OK 大功告成。不過又出現(xiàn)了個問題，本來咋樣也該給咱個值的吧，但是沒填寫的時候發(fā)現(xiàn)，啥反應(yīng)都沒有，
代碼如下：
function(value, index, elem){
/* if(value===""){
layer.msg("請?zhí)顚懽N原因")
return;
}
*/
if($('#zxr').val()===""){
layer.tips("請?zhí)顚懽N人",$('#zxr'));
return;
}
// alert(value); //得到value
layer.close(index);
}
這就尷尬了，控制臺也沒出錯，應(yīng)該是代碼的問題了。
3.修改未填寫時的提示方式
再次找到剛才的那部分代碼：
就是這段yes函數(shù)了，
yes: function (i) {
var n = s.val();
"" === n ? s.focus() : n.length > (e.maxlength || 500) ? r.tips("最多輸入" + (e.maxlength || 500) + "個字?jǐn)?shù)", 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函數(shù)就是頁面加載好執(zhí)行的，這樣咱們其實(shí)也可以將添加自定義的輸入框的方法寫在success這個屬性中。這里就不試了，見好就好哈哈。
回到正題，既然找到了，就修改下等于空時的函數(shù)吧，就在旁邊出來個tip吧。
修改后的代碼如下：
"" === n ? layer.tips(e.placeholder||'請?zhí)顚憙?nèi)容',s) : n.length > (e.maxlength || 500) ? r.tips("最多輸入" + (e.maxlength || 500) + "個字?jǐn)?shù)", s, {tips: 1}) : t && t(n, i, s)
主要就是這段了
layer.tips(e.placeholder||'請?zhí)顚憙?nèi)容',s)
也可以專門寫個屬性，設(shè)置沒填寫的提示。
完整頁面代碼如下：
layer.prompt({
formType: 2,
placeholder: '輸入注銷原因',
title: '請輸入值',
// area: ['800px', '350px'] //自定義文本域?qū)捀?/p>
}, function(value, index, elem){
/* if(value===""){
layer.msg("請?zhí)顚懽N原因")
return;
}
*/
if($('#zxr').val()===""){
layer.tips("請?zhí)顚懽N人",$('#zxr'));
return;
}
// alert(value); //得到value
layer.close(index);
});
$(".layui-layer-content").append("")
頁面效果如下：
image.png
image.png
然后再寫其他邏輯就可以啦
總結(jié)
以上是生活随笔為你收集整理的layui动态添加input_layer.prompt添加多个输入框的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 配置syslog发送_nginx简单配置
- 下一篇： numpy列相加_Python数据分析入