Original link: https://www.jianshu.com/p/65fea33e6750
We all know
layer.promptexamples of the official website is a pop-up box, then there is no more likely to come out of it, of course, possible
1. First, the need to increase the input box
Source not change, we can directly increase js Yeah, $().append()methods or good use
did not talk much on the code
layer.prompt({
formType: 2, placeholder: '输入注销原因', title: '请输入值', // area: ['800px', '350px'] //自定义文本域宽高 }, function(value, index, elem){ // alert(value); //得到value layer.close(index); }); This is an example of the official website can be compared to find, you want to join dynamic content, we first need to identify the target, debugging tools to go from the browser
Can be found in the code simple division, thus better add
this code to dynamically increase will come out
$(".layui-layer-content").append("<br/><input type=\"text\" id= \"zxr\" class=\"layui-input\" placeholder=\"输入注销人\"/>")
Here I added a <input> input box and gave a idtime so used to find, classit is not named and comes with the same, here I used a layuiform of the element, what specific reason to click on the below analysis determine the callback will explain. But given no <form>tag should then wrapped and eggs. But for aesthetic or middle row of empty, look at the results sawed it
Can be found in fresh fruit is good, but I feel on top of <textarea>the valueproperty is not good, you had to delete a customer to fill out, as if below the <input>label just fine, but access to the APInot so attributes, too le, modify the code under it.
2. Increase placeholderproperty
Because jsfiles are compressed, you can use IDEto format it, or else have a big head.
code show as below
Under a little analysis, we found the main content of the code to add 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 || '')+'"
然后形成的代码像这个样子
代码好些 主要就是看清楚这复杂的双引号和单引号
这样咱们就可以修改前端的代码了
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=\"输入注销人\"/>") 页面效果如下图
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=\"输入注销人\"/>") 页面效果如下：
然后再写其他逻辑就可以啦