layui动态添加input_layer.prompt添加多个输⼊框
我们都知道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("")
这⾥我增加了⼀个输⼊框，给了⼀个id这样使⽤的时候可以的到，class就不要起名和⾃带的⼀样了，这⾥我⽤了⼀个layui的表单的元素，具体啥原因下边分析到点击确定的回调会说明。但是鉴于没有
标签包裹 应该然并卵。但是为了美观还是中间空了⼀⾏，看看结果啥样吧
image.png
可以发现鲜果还是不错的，但是我感觉上边的中的value属性不好，客户要填写时还得删除，如果能像下边的标签就好了，不过查阅了API没有这么个属性，得嘞，修改下代码吧。
2.增加placeholder属性
由于js⽂件都是压缩的，咱们可以使⽤IDE格式化⼀下，要不然头都⼤了。
代码如下
image.png
稍微分析下，我们到了主要的添加dom内容的代码
l = 2 == e.formType ? '" + (e.value || "") + "" : function () {
return ''
input标签placeholder属性
}()
⼤概是说(本⼈js⽐较渣)：如果formType属性值为2添加标签，否则调⽤⼀个函数，当然这个函数也是为了返回其他的情况下的标签，那咱都给添加下吧
添加的代码如下：
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("")
页⾯效果如下图
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("")页⾯效果如下：
image.png
image.png
然后再写其他逻辑就可以啦

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。