Angular Materials: Можете ли вы отключить автозаполнение предложений для ввода?

Question

Я просто использую простые входные контейнеры, такие как этот

<md-input-container class="md-block" flex-gt-sm >
    <label>Name</label>
    <input md-maxlength="30" name="name" ng-model="name" />
</md-input-container>

Поле ввода предлагает ранее введенные значения, что скрывает некоторые важные элементы интерфейса, и в моем случае это действительно не нужно. Есть ли способ отключить предложения?

Answer 1

Добавьте autocomplete="off" к элементу ввода, вот так:

<input md-maxlength="30" name="name" ng-model="name" autocomplete="off" />

Смотрите это для справки.

Answer 2

Браузеры часто игнорируют autocomplete="off" для входных данных, которые не имеют атрибута имени или имеют его значение, общее для функции автозаполнения (имя, адрес электронной почты, улица, страна...).

В моем случае достаточно присвоить входу необычное имя.

<input type="text" name="someUnusualName" autocomplete="off">

Answer 3

Добавьте autocomplete = "off" во ввод, но для современного браузера используйте autocomplete = "nope"

Устаревший браузер

      <input md-maxlength="30" name="name" ng-model="name" autocomplete="off" />

Современный браузер

      <input md-maxlength="30" name="name" ng-model="name" autocomplete="nope" />

Answer 4

На всякий случай, если у кого-то был такой же опыт со мной (поскольку текущий ответ не работал на моем Chrome), я использовал, как показано ниже, и это сработало:

<input md-maxlength="30" name="name" ng-model="name" autocomplete="new-password" />

Answer 5

Новые браузеры, похоже, смотрят на поле идентификатора или поле имени, чтобы определить, что вы ищете, с помощью автозаполнения. Я начал писать наоборот, когда хотел отключить автозаполнение.

Тег проблемы - всплывающее окно автозаполнения

<input id='cp_state_i' required />

Исправление - не автозаполнение всплывающего окна

<input id='cp_etats_i' required />

Моя проблема заключалась в том, что я использовал список опций автозаполнения для состояний. Всплывающее окно было проблемой. Это было мое исправление, может вам помочь.

Еще одна вещь, которая, кажется, работает с некоторыми текстовыми полями, - это

<input autocomplete='new-password'/>

Я удаляю текст type=', и он перестанет выскакивать. но по какой-то причине он работал не со всем, а только с некоторыми вещами.

Я не уверен, почему браузеры больше не соблюдают autocomplete='off'. Это создает некоторые проблемы при работе с CRUD и другими разумными операциями, кроме простых форм входа в систему.

Answer 6

      <input type="text" id="example" placeholder="" matInput  [(ngModel)]="item.productDescription" [matAutocomplete]="product" [matAutocompleteDisabled]="condition"/>

просто используйте свойство [matAutocompleteDisabled] с допустимым условием.

Answer 7

Просто используйте ввод type="search"у тебя все будет отлично. Протестировано в Google Chrome версии 92.0.4515.107 (официальная сборка) (arm64)

Например: <input type="search" name="namesearch" id="search-cust" placeholder="Shop Name" style="width:170px" />