Как отключить подсказки полей ввода формы HTML?

Question

Под предложениями я имею в виду, что раскрывающееся меню появляется, когда вы начинаете печатать, и оно основано на том, что вы ввели ранее:

например, когда я набираю "a" в поле заголовка, это даст мне массу предложений, что довольно раздражает. Кто-нибудь знает, как это отключить? Заранее спасибо.

Answer 1

Что вы хотите, чтобы отключить HTML autocomplete Атрибут.

Установка autocomplete="off" здесь имеет два эффекта:

Он не позволяет браузеру сохранять данные полей для последующего автозаполнения в похожих формах, хотя эвристика зависит от браузера. Он не позволяет браузеру кэшировать данные формы в истории сеанса. Когда данные формы кэшируются в истории сеанса, заполненная пользователем информация будет видна после того, как пользователь отправит форму и нажмет кнопку "Назад", чтобы вернуться на исходную страницу формы.

Узнайте больше о сети MDN

Вот пример, как это сделать.

<form action="#" autocomplete="on">
  First name:<input type="text" name="fname"><br> 
  Last name: <input type="text" name="lname"><br> 
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

Если это на платформе React, используйте следующее:

<input
    id={field.name}
    className="form-control"
    type="text"
    placeholder={field.name}
    autoComplete="off"
    {...fields}/>

Ссылка для реагирования на документы

Обновить

Вот обновление, которое исправляет некоторые браузеры, пропускающие флаг "autocomplete=off".

<form action="#" autocomplete="off">
  First name: <input type="text" name="fname" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');"><br> Last name: <input type="text" name="lname" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');"><br> E-mail:
  <input type="email" name="email" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');"><br>
  <input type="submit">
</form>

Answer 2

В Chrome единственным способом, который мы могли определить, который предотвращал все формы, было использование autocomplete="new-password", Примените это к любому вводу, который не должен иметь автозаполнения, и он будет применен (даже если поле не имеет ничего общего с паролями, например SomeStateId заполнение значениями формы состояния). Смотрите эту ссылку на обсуждение ошибок Chromium для более подробной информации.

Обратите внимание, что это последовательно работает только в браузерах на основе Chromium и Safari - Firefox не имеет специальных обработчиков для этого new-password ( см. это обсуждение для некоторых деталей).

Answer 3

Добавление двух следующих атрибутов отключает все предложения полей (проверено в Chrome v85, Firefox v80 и Edge v44):

<input type="search" autocomplete="off">

Answer 4

Использование autocomplete="off" атрибут

Цитата:ВАЖНО

Поместите атрибут на <input> элемент, а не на <form> элемент

Answer 5

Я знаю, что это было давно, но если кто-то ищет ответ, это может помочь. я использовалautocomplete="new-password"для поля пароля. и это решило мою проблему. Вот документация MDN.

Answer 6

Это решение сработало для меня: Добавить readonlyатрибут.

Вот обновление, исправляющее некоторые браузеры, пропускающие "autocomplete=off"флаг.

       <input type="text" name="lname" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');">

Answer 7

<input type="text" autocomplete="off">на самом деле правильный ответ, хотя для меня это не сразу было ясно.

Согласно МДН:

Если браузер продолжает делать предложения даже после отключения автозаполнения, вам необходимо изменить атрибут имени элемента ввода.

Атрибут предотвращает сохранение данных в будущем, но не обязательно очищает существующие сохраненные данные. Таким образом, если предложения все еще делаются даже после установки атрибута на "off", либо:

• переименовать вход
• очистить существующие записи данных

Кроме того, если вы работаете в контексте React, атрибут естественным образом становится autoComplete.

Ваше здоровье!

Answer 8

Autocomplete = "new-password" у меня не работает.

Я построил React Form. Google Chrome автоматически заполнит ввод формы на основе атрибута name.

 <input 
  className="scp-remark" 
  type="text" 
  name="remark"
  id='remark'
  value={this.state.remark} 
  placeholder="Remark" 
  onChange={this.handleChange} 
/>

Он будет основан на атрибуте "name", чтобы решить, следует ли автоматически заполнять форму. В этом примере имя: "замечание". Таким образом, Chrome будет автоматически заполняться на основе всех моих предыдущих "примечаний".

<input 
  className="scp-remark" 
  type="text" 
  name={uuid()} //disable Chrome autofill
  id='remark'
  value={this.state.remark} 
  placeholder="Remark" 
  onChange={this.handleChange} 
/>

Итак, чтобы взломать это, я даю name случайное значение, используя библиотеку uuid().

import uuid from 'react-uuid';

Теперь выпадающего списка автозаполнения не будет. Я использую атрибут id для идентификации ввода формы вместо имени в обработчике события handleChange

handleChange = (event) => {
    const {id, value} = event.target;
    this.setState({
        [id]: value,
    })
}

И у меня это работает.

Answer 9

Я закончил тем, что изменил поле ввода на

<textarea style="resize:none;"></textarea>

Вы никогда не получите автозаполнение для текстовых.

Answer 10

У меня была аналогичная проблема, но в конце концов я сделал

<input id="inp1" autocomplete="off" maxlength="1" />т.е.autocomplete = 'off' и предложения исчезнут.

Answer 11

Если вы используете ReactJS. Затем сделайте это как autoComplete="off"

      <input type="text" autoComplete="off" />