javascript - Bootstrap 弹出框 : reload last form values

Question

在我的网站中，Bootstrap 弹出窗口中有一个小型登录表单(通常是两个用户名和密码文本字段)。

表单位于 HTML 页面中，但隐藏:

<div id="navbar-login-content" class="hidden">
                            <h4>Login</h4>

                            <form method="post" action="-----}" role="form">

                                <div class="form-group">
                                    <label for="id_username" class="sr-only">Username</label>
                                    <input type="text" class="form-control" maxlength="30" name="username"
                                           id="id_username" placeholder="Username">
                                </div>

                                <div class="form-group">
                                    <label for="id_password" class="sr-only">Password</label>
                                    <input type="password" class="form-control" maxlength="50" name="password"
                                           id="id_password" placeholder="Password">
                                </div>
</div>

我通过 Javascript 将其加载到弹出窗口中，如下所示:

$(mypopoveritem).popover({
            content: $('#navbar-login-content').html()
        }).mouseenter(function () {
            var _this = this;
            $(this).popover("show");

可视化正确并且表单有效。唯一的问题是，当我关闭弹出窗口时，我会丢失文本字段的内容，而当我重新打开弹出窗口时，它们又会变成空白。

我想在重新打开弹出窗口时保留表单的内容，我想，为了做到这一点，我应该更新“navbar-login-content”的代码，并使用以下命令将其重新加载到弹出窗口中方法 .attr("data-content", 'value')，但我不知道继续进行:如果我走对了路，你能帮助我吗？否则你能建议我一个更好的方法吗？

提前致谢

Answer 1

这不起作用的原因是弹出窗口使用 HTML 模板的初始副本。当弹出窗口隐藏时，它会连同值一起被销毁。当它再次打开时，它会将所有内容更改回初始 HTML 模板。

一个可能的解决方案是首先将弹出窗口的内容选项更改为函数而不是字符串:

$('.btn').popover({
    content: function(){
        return $('#navbar-login-content').html();
    }
})

这意味着每次显示弹出窗口时，它都会及时获取该时间点的 HTML 模板。下一步是在隐藏弹出窗口时更改此 HTML 模板，以包含我们设置的值。现在，我个人对记住我的密码感到不太舒服，尤其是在 HTML 中可读，所以这里是如何仅使用用户名来做到这一点:

$('.btn').on('hide.bs.popover', function () {
    var username = $('.popover-content #id_username').val();
    $('#navbar-login-content #id_username').attr('value', username);
})

这应该可以解决问题。如果您想要的话，请随意对密码执行相同的操作。

JSFiddle .

我还为密码提供了一种不同的方法，它保存值，然后在显示弹出窗口时重新输入该值。不过，在输入填充之前有一个烦人的停顿!这是所有内容:

var password = '';

$('.btn').popover({
    content: function(){
        return $('#navbar-login-content').html();
    }
})

$('.btn').on('shown.bs.popover', function () {
    $('.popover-content #id_password').val(password);
})

$('.btn').on('hide.bs.popover', function () {
    var username = $('.popover-content #id_username').val();
    $('#navbar-login-content #id_username').attr('value', username);

    // if there is a value for the password, let's remove the placeholder to make the pause less noticeable
    password = $('.popover-content #id_password').val();
    placeholderText = password == '' ? 'Password' : '';
    $('#navbar-login-content #id_password').attr('placeholder', placeholderText);
})