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);
});
这个是官网上的例子相比都可以找得到,想要动态加入内容,首先咱需要找准目标,浏览器调试工具走起
![](https://upload-images.jianshu.io/upload_images/2857487-f4a6134965851e70.png?imageMogr2/auto-orient/strip|imageView2/2/w/533/format/webp)
可以发现代码时分的简洁,这样就更好添加了
这样动态增加的代码也就出来了
$(".layui-layer-content").append("<br/><input type=\"text\" id= \"zxr\" class=\"layui-input\" placeholder=\"输入注销人\"/>")
这里我增加了一个<input>输入框,给了一个id
这样使用的时候可以找的到,class
就不要起名和自带的一样了,这里我用了一个layui
的表单的元素,具体啥原因下边分析到点击确定的回调会说明。但是鉴于没有<form>
标签包裹 应该然并卵。但是为了美观还是中间空了一行,看看结果啥样吧
![](https://upload-images.jianshu.io/upload_images/2857487-034b91b1171c4a8c.png?imageMogr2/auto-orient/strip|imageView2/2/w/366/format/webp)
可以发现鲜果还是不错的,但是我感觉上边的<textarea>
中的value
属性不好,客户要填写时还得删除,如果能像下边的<input>
标签就好了,不过查阅了API
没有这么个属性,得嘞,修改下代码吧。
2.增加placeholder
属性
由于js
文件都是压缩的,咱们可以使用IDE
格式化一下,要不然头都大了。
代码如下
![](https://upload-images.jianshu.io/upload_images/2857487-000d2df42cc10e02.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)
稍微分析下,我们找到了主要的添加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 || '')+'"
然后形成的代码像这个样子
![](https://upload-images.jianshu.io/upload_images/2857487-2a7a31a570d44990.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)
代码好些 主要就是看清楚这复杂的双引号和单引号
这样咱们就可以修改前端的代码了
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=\"输入注销人\"/>")
页面效果如下图
![](https://upload-images.jianshu.io/upload_images/2857487-f7877fa083f1318e.png?imageMogr2/auto-orient/strip|imageView2/2/w/358/format/webp)
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=\"输入注销人\"/>")
页面效果如下:
![](https://upload-images.jianshu.io/upload_images/2857487-c5da82884c6bc34e.png?imageMogr2/auto-orient/strip|imageView2/2/w/471/format/webp)
![](https://upload-images.jianshu.io/upload_images/2857487-d16dc0f41d7238a9.png?imageMogr2/auto-orient/strip|imageView2/2/w/462/format/webp)
然后再写其他逻辑就可以啦