Question

在我的网站中，我在Bootstrap popover中有一个小的登录表单（通常是两个用户名和密码文本字段）。

表单位于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将其加载到popover中：

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

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

当我重新打开popover时，我想保留表单的内容，我想，为了做到这一点，我应该更新“navbar-login-content”的代码并使用popover中的重新加载它方法.attr（“数据内容”，“价值”），但我不知道热门继续：如果我的方法正确，你能帮助我吗？你还能建议我一个更好的方法吗？

提前致谢

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);
})

Bootstrap popover：重新加载最后的表单值

1 个答案: