javascript - 让浏览器记住动态生成的表单中的输入字段值

Question

如果用户实际点击“记住页面密码”(浏览器，不是网站功能)，浏览器记住用户和密码信息是正常的。

我有一个使用异步调用生成的登录表单，类似于:

$('#container').load('/path/file.php?what=login_form');

在此表单中，即使我点击“是，记住密码”，提交后浏览器也不会记住(并为我自动填写)。

这是否意味着只有 URLable 页面表单会被记住？

编辑 - 输出示例

 <div class="caja loginBox">
        <form action="index.php" method="post" name="sesion" id="sesion">
        <h1>Inicio de sesion</h1><h2>Usuario</h2>
     <input type="text" id="nombre" name="nombre"/>
     <h2>Password</h2><input type="password" id="pass" name="pass"/><button type="submit" name="inicio">Entrar</button>
     </form> </div>

Answer 1

我找到了一个适用于 Firefox 密码管理器的解决方案。根据您动态加载表单的原因，我的解决方案可能会或可能不会帮助您。 (更多内容见下文。)

首先，在使用相同方法和操作并包含具有相同名称的字段的页面上放置一个不可见的表单(我使用了“display:none”的内联样式)。您可以将其放在最终包含真实表单的 div 下方:

<div id="container"></div>

<div id="fake-form" style="display: none">
    <form action="index.php" method="post">
        <input type="text" name='nombre' class='nombre'/>
        <input type="password" name='pass' class='pass' />
    </form>
</div>

然后，在您的 JavaScript 中，在加载真实表单的内容后，从假表单中复制值并将它们放入真实表单中:

<script type="text/javascript">
    $(function() {
        $("#container").load("/path/file.php?what=login_form", function() {
            var fakeForm = $("#fake-form");
            $("#nombre").val(fakeForm.find(".nombre").val());
            $("#pass").val(fakeForm.find(".pass").val());
        });
    });
</script>

就是说，如果您在动态加载实际表单之前费尽心思将表单放到页面上，那么为什么不删除最后一步并让表单在页面上开始呢？ :-) 想必您有充分的理由这样做。也许来自服务器的表单具有独特的样式信息，或者字段旁边的动态错误消息，或者国际化字段名称？

但是，如果您从服务器中提取的表单具有因用户而异的操作，那么我的技巧就不会奏效，因为您必须在构建隐藏表单时提前知道该操作。

如果是这种情况，那么也许您可以反向尝试我的技巧，隐藏您从服务器加载的“真实表单”并向用户显示虚假表单。假表单可以发布到一个不存在的 URL，但是你可以使用 JavaScript 拦截“假表单”的 onsubmit，将用户名和密码复制到不可见的“真实表单”中，调用真实表单上的提交，然后返回 false 以防止原始表单提交通过。

更新:再考虑一下后，我认为我的第二个解决方案行不通，因为密码管理器几乎肯定会将用户名和密码与您实际提交的最终 URL 相关联数据，而不是您最初只会假装提交的表单中的初始操作 URL。无论如何，希望我的第一个解决方案足以满足您的需求。