如何在html中继续使用datalist元素时关闭自动完成功能

Question

我有一个input字段,显示使用html5 <datalist>元素的列表.问题是,<datalist>浏览器自动完成也会显示历史列表(这是以前键入的值列表,不包括在内<datalist>).所以我只想摆脱history-list不是<datalist>.

如果我使用该autocomplete = "off"功能,这也会阻止<datalist>.

简而言之,我只想要的<datalist>不是历史.

Answer 1

您是否可以使用input没有id或name属性的字段？没有它,浏览器实际上没有办法将历史与该元素相关联.

在我对Firefox的真正快速测试中,这似乎可以解决问题:

<form>
  <!-- these will remember input -->
  With id: <input id="myInputId" list="myList" /><br />
  With name: <input name="myInputName" list="myList" /><br />

  <!-- these will NOT remember input -->
  No id, name, class: <input list="myList" /><br />
  With class: <input class="myInputClass" list="myList" />

  <datalist id="myList">
    <option value="Option 1"></option>
    <option value="Option 2"></option>
  </datalist>

  <br />

  <input type="submit" />
</form>

在上面的代码中,input以S id或name会记得过去的数值,但input没有任何东西,只需输入class将不会记得任何事情.

不幸的是,input如果你需要它有一个name或那个,这确实使得使用稍微困难id.在这种情况下,我会尝试使用id'ed input也是display: none'ed,然后使用一些JavaScript来保持与input不记得过去值的同步.

Answer 2

尝试使用 HTML 属性自动完成

<input name="q" type="text" autocomplete="off"/>

source关闭输入的自动完成功能

Answer 3

试试这个，我希望它有效。

<input id="datalisttestinput" list="stuff" autocomplete="off"></input>
<datalist id="stuff">
     <option id="1" value="Amy">
     <option id="2" value="Kristal">
     <option id="3" value="Collin">
     <option id="4" value="Carl">
</datalist>