layer获取弹框中输入框的值

最新推荐文章于 2023-09-06 10:12:22 发布

原创最新推荐文章于 2023-09-06 10:12:22 发布 · 1.1w 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#layui #弹框输入框 #layer

front-end(layui) 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了在layui框架下，如何在layer弹出的修改密码输入框中正确获取用户输入的值。重点强调了在获取输入值时，需要使用$(oldPass).val()的方式，而非直接使用oldPass.val()，以确保能正确获取到输入的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.layer弹出修改密码输入框代码

$("#changePass").click(function () {
    layer.open({
        type: 1
        ,title: "修改密码",
        closeBtn: 1,
        shadeClose:true,
        isOutAnim:true,
        area: '400px',
        shade: 0.7
        ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
        ,resize: false,
        btnAlign: 'c'
        ,moveType: 1,//拖拽模式，0或者1

        content: '<div style="padding:50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;"><div class="layui-form"><div class="layui-form-item"><div class="layui-form-label">旧密码</div><div class="layui-input-inline"><input id="old-pass" style="color: #0C0C0C" class="layui-input" type="password" placeholder="旧密码"></div></div><div class="layui-form-item"><div class="layui-form-label">新密码</div><div class="layui-input-inline"><input style="color: #0C0C0C" id="new-pass" class="layui-input" type="password" placeholder="新密码"></div></div><div class="layui-form-item"> <div style="    float: left;display:block;padding: 9px 12px;width: auto;font-weight: 400;text-align:right;">确认密码</div><div class="layui-input-inline"><input style="color: #0C0C0C" class="layui-input" id="sure-pass" type="password" placeholder="确认密码"></div></div></div></div> <div class="btn-cont"><button class="pass cancel-btn">取消</button><button class="pass ok-btn">确认</button> </div> </div>',

        success: function(layero,index){
            var btn = layero.find('.btn-cont');
            var oldPass=layero.find('#old-pass');
            var newPass=layero.find('#new-pass');
            var surePass=layero.find('#sure-pass');

            //取消按钮事件
            btn.find('.cancel-btn').click(function () {
                layer.close(index);
            });

            //确认按钮点击事件
            btn.find('.ok-btn').click(function () {

                //获取输入框内容方式一
                console.log("oldPass="+$(oldPass).val());
                console.log("newPass="+$(newPass).val());
                console.log("surePass="+$(surePass).val());

                //获取输入框内容方式二
                $(layero).find("input").each(function(i, v) {
                    console.log("index="+i+"===="+"value="+$(v).val());
                });

                layer.close(index);
            })
        }
    });
});