如何让浏览器记住表单值以在 ajax 提交时自动完成？

【问题标题】：How can I make browser remember form values for autocomplete on ajax submit?如何让浏览器记住表单值以在 ajax 提交时自动完成？
【发布时间】：2017-04-20 17:53:47
【问题描述】：

我创建了一个表单，它在提交时会为提交进行 ajax 调用。这不是标准的表单提交。如何让浏览器记住表单数据（不仅仅是用户名和密码）以进行自动完成？我曾尝试将表单提交到隐藏的 iframe，但它仅适用于 chrome。是否有适用于所有浏览器的解决方案或解决方法。

【问题讨论】：

自动完成功能是一种自动浏览器功能（它会保存您输入的最后一个单词）。您可以禁用自动补全stackoverflow.com/questions/2530/…
您有机会找到解决方案吗？在使用 Javascript 处理表单时，我似乎找不到任何关于强制持久性的信息。

标签： html forms autocomplete

【解决方案1】：

我终于找到了解决办法。

基本上浏览器会在表单上触发submit 事件时存储输入值。

然后，您需要做的就是通过调用 event.preventDefault() 函数来防止页面重新加载，并使用 Javascript 处理其余部分。

这是一个基本示例：https://codesandbox.io/s/phnsn

<form name="jsForm">
    <input type="text" name="search" autocomplete="search" />
    <button type="submit">Search</button>
</form>

<script>
    document.jsForm.addEventListener("submit", function(event) {
        event.preventDefault();

        // Handle Ajax call here
    });
</script>

请记住，如果您在提交按钮上添加了点击事件，您仍然需要以编程方式触发submit 事件。所以最好使用提交类型的按钮。

【讨论】：