Как отключить автозаполнение, продолжая использовать элемент datalist в html

У меня есть поле input, которое показывает список с помощью элемента html5 <datalist>. Проблема заключается в том, что при <datalist> в автозаполнении браузера также отображается список истории (который является списком ранее введенных значений, которые не включены в <datalist>). Поэтому я просто хочу избавиться от history-list не <datalist>.

Если я использую функцию autocomplete = "off", это также блокирует <datalist>.

Короче говоря, я просто хочу, чтобы <datalist> не был одним из них.

Ответ 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 с id или name будет помнить прошлые значения, но input без каких-либо изменений, а ввод с помощью только class будет не запомнить что-нибудь.

К сожалению, это немного облегчает использование input, если вам нужно иметь name или id. В этом случае я попытался бы иметь id 'ed input, который также является display: none' ed, а затем использовать некоторый JavaScript, чтобы синхронизировать его с input, который не будет помнить прошлые значения.

Ответ 2

Попробуйте использовать автозаполнение атрибута HTML

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

source Отключить автозаполнение для ввода

Ответ 3

Я использую такой код:

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

хороший. Диаталист, показанный для выбора, завершен.

bad: поле ввода пуст, поэтому старое значение не документировано, если необходимо, чтобы пользователь запомнил

Ответ 4

попробуй это:

<datalist id="datalist_id">

ЯШ:

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

Это очистит историю даталистов. Это работало для меня на Chrome. Затем, если вы хотите добавить опции в список, попробуйте:

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

Ура !!!

Ответ 5

Вы можете использовать autocomplete = "новый пароль". autocomplete = "off" не работает в моем случае.

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

Ответ 6

Попробуйте это, я надеюсь, что его работа

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

С наилучшими пожеланиями