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

Question

如果用户实际点击了"rember page password"(浏览器,而不是网站功能),浏览器记住用户和密码信息是正常的事情.

我有这个登录表单,我使用异步调用生成,如:

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

在这种形式下,当提交时,即使我点击了"是,请记住密码",浏览器也不记得(并为我自动填充).

这是否意味着只记住可映射的页面表单？

编辑 - 输出示例

 <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>

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

但是，如果您从服务器提取的表单具有针对不同用户而不同的操作，那么我的技巧将不起作用，因为您在构建隐藏表单时必须提前知道该操作。

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

更新：再考虑一下之后，我认为我的第二个解决方案不起作用，因为密码管理器几乎肯定将用户名和密码与您实际提交数据的最终 URL 相关联，而不是初始操作 URL以你最初假装服从的形式。不管怎样，希望我的第一个解决方案足以满足您正在做的事情。