オリジナルリンク: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); });
これは、公式サイトを見つけるために比較することができるの一例である、あなたは動的なコンテンツに参加したい、我々は最初のターゲットを特定する必要があり、ブラウザから行くためのツールをデバッグ
コードの単純な割り算で見つけることができ、より良好に追加
動的に出てくる高めるために、このコードを
$(".layui-layer-content").append("<br/><input type=\"text\" id= \"zxr\" class=\"layui-input\" placeholder=\"输入注销人\"/>")
ここで私は、<入力>入力ボックスを追加しましたid
ので、見つけるために使用時間が、class
それは名前が付いていないと同じに付属している、ここで私が使用したlayui
要素の形式を、特定のどのような理由は、以下の分析にクリックしますコールバックが説明します決定。しかし、誰与えられていない<form>
タグ、その後包まれなければならないと卵を。しかし、空の美的または中央の行のために、結果を見て、それを鋸
新鮮な果物で見つけることができる良いですが、私はの上に感じるプロパティ良くありません、あなたは以下の場合と同様に、記入する顧客を削除しなければならなかっただけで罰金ラベルが、へのアクセスではない属性ので、あまりにル、下のコードを変更それは。<textarea>
value
<input>
API
2.増加のplaceholder
プロパティ
のでjs
、ファイルが圧縮されている、あなたは使用することができIDE
、それをフォーマット、または他の大きな頭を持っています。
コードは以下の通りです
少し分析に基づき、当社は、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=\"输入注销人\"/>")
页面效果如下:
然后再写其他逻辑就可以啦