引导弹出窗口:重新加载上次的表单值

Bootstrap popover: reload last form values

本文关键字：加载 表单 窗口 新加载      更新时间：2023-09-26

在我的网站上，我有一个小的登录表单(通常的两个用户名和密码文本字段)在一个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");

可视化是正确的，形式工作。唯一的问题是，当我关闭弹出窗口时，我失去了文本字段的内容，当我重新打开弹出窗口时，它们又是空白的。

我想保持我的表单的内容，当我重新打开弹出窗口，我猜，为了做到这一点，我应该更新的代码"导航栏登录内容"和重载它在弹出窗口使用方法。attr("数据内容"，"值")，但我不知道热继续:如果我是在正确的方式，你能帮助我吗?否则你能给我一个更好的建议吗?

Thanks in advance

这不起作用的原因是因为弹出窗口使用了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);
})
相关文章：