输入文本字段自动完成（自动填充），在 Chrome 上无法按预期工作

Question

我有一个带有电子邮件文本字段的网页，它不在 <form> 标记内，如下所示：

<input id="email" label="False" name="email" placeholder="Email" required="required" type="email" value="">

我使用的是最新的 Chrome (v35)，并且我之前输入了一个名为“example@domain.com”的电子邮件（为了便于解释）。

问题是这样的： 当我重新加载网页时，单击电子邮件文本字段并开始输入“exa”，会弹出一个带有“example@domain.com”的自动完成框。 如果我将鼠标光标移到建议上而不单击它，则文本字段会在其中显示“example@domain.com”。当我将光标从建议框移开时，文本字段仍然显示完整的电子邮件地址。

为什么会有这样的问题？因为当我尝试使用 jQuery 或 vanilla javascript 读取文本字段的值时，我得到的是“exa”，而不是“example@domain.com”。

$("#email").val(); // returns "exa"

如果我将输入文本字段封装在 <form> 标记内，则不会出现上述问题 - 当鼠标光标移开时，自动完成的文本会从输入字段中消失，因此文本字段并且读数是同步的。

<form><input id="email" label="False" name="email" placeholder="Email" required="required" type="email" value=""></form>

我创建了a JSFiddle with a demo。

根据this，输入字段可以在<form> 标记之外完美工作。

我在 Firefox 上测试过，一切正常。

那是为什么呢？

Answer 1

为什么不在输入字段中使用autocomplete="off" 属性。这个在 chrome 上对我来说很好用

<input id="email" label="False" name="email" placeholder="Email" autocomplete="off" required="required" type="email" value="">

Updated Fiddle