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

Question

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

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

我正在使用最新的Chrome（第35版），之前我输入了一封电子邮件“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