自动完成不会自动完成

Question

<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。在那里你会注意到，实际上，

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");
}

自动完成不会自动完成

Autocompletion doesn't autocomplete

javascript

forms

autocomplete

local-storage