自动完成不会自动完成

Question

Here is a page 与：

<form action="action.php" method="get" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  E-mail: <input type="email" name="email"><br>
  <input type="submit">
</form> 

让我们输入 2 个字段，然后提交。那么在重新加载页面时，字段没有自动完成，为什么？

我应该使用本地存储吗？饼干？确保几天后返回的用户仍会自动完成其字段？

（我正在使用带有自动完成默认选项的 Firefox，即未禁用）。

Answer 1

首先，您需要意识到元素上的属性完全由浏览器实现，而无需您进行任何编码。

浏览器实现这些东西的方式不同。

您应该检查the spec。在那里你会注意到，实际上，

默认情况下，表单元素的自动完成属性处于开启状态。

解决您遇到的问题的唯一方法是，如果您想要更可靠和一致的用户体验；不要依赖浏览器实现。

简短的回答：使用 Javascript

有数百个插件可以为您做到这一点。我会为你指出一个最近在 github 上很流行但实际上需要你告诉这个插件你期望它做什么的插件：https://leaverou.github.io/awesomplete/

更新答案：

我看到您只想预先填写该字段。这可以通过以下方式完成（未经测试）：

var form = document.forms["name_of_your_form"];
form.onsubmit = function(){
  localStorage.setItem("fname", form.elements["fname"].value);
  localStorage.setItem("email", form.elements["email"].value);
}
window.onload = function() {
  form.elements["fname"].value = localStorage.getItem("fname");
  form.elements["email"].value = localStorage.getItem("email");
}