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