web-dev-qa-db-ja.com

HTMLでdatalist要素を使用し続けているときにオートコンプリートをオフにする方法

Html5 <datalist>要素を使用してリストを表示するinputフィールドがあります。問題は、<datalist>を使用すると、ブラウザーのオートコンプリートが履歴リスト（以前に入力した値のリストであり、<datalist>に含まれていないリスト）も表示することです。したがって、history-listではなく<datalist>を削除したいだけです。

autocomplete = "off"機能を使用すると、<datalist>もブロックされます。

要するに、私は<datalist>に履歴を残したくないだけです。

htmlautocompletebrowser-historyhtml-datalist
34
Yousuf Memon

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またはidを含むnamesは過去の値を記憶しますが、inputは何も含まず、classのみを含む入力はnotを記憶します。

残念ながら、これはinputまたはnameを必要とする場合、idの使用を少し難しくします。その場合、id 'ed inputもdisplay: none' edし、JavaScriptを使用して、過去の値を記憶しないinputとの同期を維持しようとします。

18
thetoast

HTML属性のオートコンプリートを使用してみてください

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

ソース 入力のオートコンプリートをオフにする

4
Ananda

私はこのようなコードを使用します：

<input name="anrede" list="anrede" onmousedown="value = '';" />
<datalist id="anrede">
    <option value="Herr"></option>
    <option value="Frau"></option>
</datalist>

good：選択用に表示されたデータリストが完成しました

bad：入力フィールドが空であるため、ユーザーが覚えておく必要がある場合、古い値は文書化されません

2
Ulrich Berth

autocomplete = "new-password"を使用できます。 autocomplete = "off"は私の場合は機能しませんでした。

<input name="q" type="text" autocomplete="new-password"/>
1
akshayjain97

これを試して：

<datalist id="datalist_id">

js：

dataList = $("#datalist_id")
dataList.empty()

これにより、データリストの履歴が消去されます。これはChromeでうまくいきました。次に、リストにオプションを追加する場合は、次のことを試してください。

dataList.append("<option>Some Option</option>")

乾杯!!!

0
nwillo