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("<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("&#x6700;&#x591A;&#x8F93;&#x5165;" + (e.maxlength || 500) + "&#x4E2A;&#x5B57;&#x6570;", 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("&#x6700;&#x591A;&#x8F93;&#x5165;" + (e.maxlength || 500) + "&#x4E2A;&#x5B57;&#x6570;", 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

然后再写其他逻辑就可以啦

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,015评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,262评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,727评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,986评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,363评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,610评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,871评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,582评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,297评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,385评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,035评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2 270

推荐阅读更多精彩内容

  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,204评论 0 17
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,569评论 25 707
  • 小时候有很多梦想 想当发明家 想当作家 想当董事长 想获诺贝尔奖 想赚很多很多钱 那时候以为的幸福 不过是别人眼中...
    天野丢阅读 201评论 0 1
  • 你好亲爱的,我们的付于敏水光天丝酵素面慕采用的是SE-384蚕丝面膜纸,它出生于日本科玛集团,我第一次拿到它的时候...
    FAB梅梅阅读 296评论 0 0
  • 春雨怨(方子晴) 飞雨似杵针 淅淅枝头嫩 欲将雷声扫 还人一枝春 雨(甘屹文) 雨落纷纷云似漏 天昏地暗风满楼 雷...
    春儿的后花园阅读 229评论 0 0