javascript - 自动完成不会自动完成

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 个字段，然后提交。那么当重新加载页面时，字段不会自动完成，为什么？

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

(我使用的 Firefox 具有关于自动完成的默认选项，即未禁用)。

Answer 1

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

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

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

By default, the autocomplete attribute of form elements is in the on state.

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

简短的回答:使用 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");
}