javascript - 文本输入字段不适用于 chrome 字段历史记录

Question

在常规文本输入字段中，我希望通过双击它来查看我在 Chrome 中输入该字段的历史记录。

我们有一些使用 Angular JS 在页面上呈现的字段。然而，它们从来没有任何历史记录项目，双击也不会显示任何结果。

在简短的测试中，添加 name 属性似乎不会恢复此功能。

这是因为该字段从未通过表单元素正式提交吗？如果是这样，如何解决这个问题？

我在 Google 上找到的有关此问题的所有结果都与相反的情况有关，“off”被忽略。

编辑:这是一个例子。如果我发送 POST 请求，我可以将值添加到历史记录中，但不能添加到不在表单中并已提交的字段: https://jsfiddle.net/gtuzy4p2/2/

这里还有一个规范的链接，其中详细说明了如何使用该属性，但没有详细说明浏览器应如何保存值。 https://html.spec.whatwg.org/multipage/forms.html#autofill

Answer 1

正如您所注意到的，该规范没有指定浏览器应如何以及何时自动记住表单值。这意味着浏览器可以按照他们想要的方式执行此操作，并且您不能依赖特定的行为。在这种情况下，Chrome 和许多其他浏览器将提交表单作为保存输入值的唯一线索。

如果您想确保某种行为，请查看 datalist element 。这是一个示例，直接从链接的 wiki 页面复制:

<label>Choose a browser from this list:
<input list="browsers" name="myBrowser" /></label>
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>

使用 JavaScript，您可以编写自己的逻辑，将之前输入的值存储到 local storage 中。然后在稍后的页面加载时使用这些值动态填充 datalist。大多数(如果不是全部)支持 datalist 的浏览器也会对其元素进行自动补全，如果没有，用户只需从下拉列表中选择一个即可。