我們都知道layer.prompt官網(wǎng)上的例子是一個(gè)彈出框，那么有沒(méi)有可能出來(lái)多個(gè)呢，當(dāng)然是可以的

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

源碼不好改動(dòng)，咱們可以直接js增加呀，$().append()方法還是很好用的

話不多說(shuō)上代碼

layer.prompt({

formType: 2,

placeholder: '輸入注銷(xiāo)原因',

title: '請(qǐng)輸入值',

// area: ['800px', '350px'] //自定義文本域?qū)捀?/p>

}, function(value, index, elem){

// alert(value); //得到value

layer.close(index);

});

這個(gè)是官網(wǎng)上的例子相比都可以找得到，想要?jiǎng)討B(tài)加入內(nèi)容，首先咱需要找準(zhǔn)目標(biāo)，瀏覽器調(diào)試工具走起

image.png

可以發(fā)現(xiàn)代碼時(shí)分的簡(jiǎn)潔，這樣就更好添加了

這樣動(dòng)態(tài)增加的代碼也就出來(lái)了

$(".layui-layer-content").append("")

這里我增加了一個(gè)輸入框，給了一個(gè)id這樣使用的時(shí)候可以找的到，class就不要起名和自帶的一樣了，這里我用了一個(gè)layui的表單的元素，具體啥原因下邊分析到點(diǎn)擊確定的回調(diào)會(huì)說(shuō)明。但是鑒于沒(méi)有

標(biāo)簽包裹 應(yīng)該然并卵。但是為了美觀還是中間空了一行，看看結(jié)果啥樣吧

image.png

可以發(fā)現(xiàn)鮮果還是不錯(cuò)的，但是我感覺(jué)上邊的中的value屬性不好，客戶(hù)要填寫(xiě)時(shí)還得刪除，如果能像下邊的標(biāo)簽就好了，不過(guò)查閱了API沒(méi)有這么個(gè)屬性，得嘞，修改下代碼吧。

2.增加placeholder屬性

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

代碼如下

image.png

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

l = 2 == e.formType ? '" + (e.value || "") + "" : function () {

return ''

}()

大概是說(shuō)(本人js比較渣)：如果formType屬性值為2添加標(biāo)簽，否則調(diào)用一個(gè)函數(shù)，當(dāng)然這個(gè)函數(shù)也是為了返回其他的情況下的標(biāo)簽,那咱都給添加下吧

添加的代碼如下：

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

然后形成的代碼像這個(gè)樣子

image.png

代碼好些 主要就是看清楚這復(fù)雜的雙引號(hào)和單引號(hào)

這樣咱們就可以修改前端的代碼了

layer.prompt({

formType: 2,

placeholder: '輸入注銷(xiāo)原因',

title: '請(qǐng)輸入值',

// area: ['800px', '350px'] //自定義文本域?qū)捀?/p>

}, function(value, index, elem){

// alert(value); //得到value

layer.close(index);

});

$(".layui-layer-content").append("")

頁(yè)面效果如下圖

image.png

OK 大功告成。不過(guò)又出現(xiàn)了個(gè)問(wèn)題，本來(lái)咋樣也該給咱個(gè)值的吧，但是沒(méi)填寫(xiě)的時(shí)候發(fā)現(xiàn)，啥反應(yīng)都沒(méi)有，

代碼如下：

function(value, index, elem){

/* if(value===""){

layer.msg("請(qǐng)?zhí)顚?xiě)注銷(xiāo)原因")

return;

}

*/

if($('#zxr').val()===""){

layer.tips("請(qǐng)?zhí)顚?xiě)注銷(xiāo)人",$('#zxr'));

return;

}

// alert(value); //得到value

layer.close(index);

}

這就尷尬了，控制臺(tái)也沒(méi)出錯(cuò)，應(yīng)該是代碼的問(wèn)題了。

3.修改未填寫(xiě)時(shí)的提示方式

再次找到剛才的那部分代碼：

就是這段yes函數(shù)了，

yes: function (i) {

var n = s.val();

"" === n ? s.focus() : n.length > (e.maxlength || 500) ? r.tips("最多輸入" + (e.maxlength || 500) + "個(gè)字?jǐn)?shù)", s, {tips: 1}) : t && t(n, i, s)

}

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

success: function (e) {

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

}

就是自動(dòng)添加的那個(gè)輸入框嘛，這也就是咱們自己添加的輸入框的class不用layui-layer-input的原因了，而且可以看出來(lái)這個(gè)success函數(shù)就是頁(yè)面加載好執(zhí)行的，這樣咱們其實(shí)也可以將添加自定義的輸入框的方法寫(xiě)在success這個(gè)屬性中。這里就不試了，見(jiàn)好就好哈哈。

回到正題，既然找到了，就修改下等于空時(shí)的函數(shù)吧，就在旁邊出來(lái)個(gè)tip吧。

修改后的代碼如下：

"" === n ? layer.tips(e.placeholder||'請(qǐng)?zhí)顚?xiě)內(nèi)容',s) : n.length > (e.maxlength || 500) ? r.tips("最多輸入" + (e.maxlength || 500) + "個(gè)字?jǐn)?shù)", s, {tips: 1}) : t && t(n, i, s)

主要就是這段了

layer.tips(e.placeholder||'請(qǐng)?zhí)顚?xiě)內(nèi)容',s)

也可以專(zhuān)門(mén)寫(xiě)個(gè)屬性，設(shè)置沒(méi)填寫(xiě)的提示。

完整頁(yè)面代碼如下：

layer.prompt({

formType: 2,

placeholder: '輸入注銷(xiāo)原因',

title: '請(qǐng)輸入值',

// area: ['800px', '350px'] //自定義文本域?qū)捀?/p>

}, function(value, index, elem){

/* if(value===""){

layer.msg("請(qǐng)?zhí)顚?xiě)注銷(xiāo)原因")

return;

}

*/

if($('#zxr').val()===""){

layer.tips("請(qǐng)?zhí)顚?xiě)注銷(xiāo)人",$('#zxr'));

return;

}

// alert(value); //得到value

layer.close(index);

});

$(".layui-layer-content").append("")

頁(yè)面效果如下：

image.png

image.png

然后再寫(xiě)其他邏輯就可以啦

總結(jié)

以上是生活随笔為你收集整理的layui动态添加input_layer.prompt添加多个输入框的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。