Отключить автозаполнение хрома для имени пользователя и пароля, не работающего в более новых версиях

Я пытался найти надежный метод остановки именно этого, и единственное решение, которое я нашел работающим, - это размещение пары скрытых полей в верхней части тела.

<!-- fake fields are a workaround for chrome autofill getting the wrong fields -->
<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>

Хакер, я знаю, но я даже попробовал точный пример, приведенный в Ссылка на ответ команды Chrome, упомянутая Coderer:

Например, если у вас есть поле ввода адреса в вашем инструменте CRM, которое вы не хотите, чтобы Chrome выполнял автозаполнение, вы можете придать ему семантическое значение, которое имеет смысл относительно того, что вы просите: например, autocomplete = "новый-пользователь-уличный-адрес". Если Chrome столкнется с этим, он не будет пытаться автоматически заполнить поле.

... но это не работает (хотя посту много лет).

Вы пробовали совет из этого официального ответа команды Chrome?

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

На самом деле это не сработает, если у вас нет действительного атрибута name. Итак, вы пробовали что-то вроде <input type="text" name="fieldX" autocomplete="my-site-field-x">? Значения, используемые для name и autocomplete, могут иметь значение, поскольку я слышал, что некоторые люди предполагают, что Chrome иногда будет выполнять нечеткое сопоставление с распознанными значениями из спецификации (например, address, telephone, email и т. Д.).

Мне удалось отключить функцию автозаполнения Chrome, создав скрытый ввод прямо перед вводом и добавив случайное число для исходного имени ввода:

<input type="text" name="address" value="" readOnly={true} style={{display: "none"}}/>
<input
  ref={inputRef}
  className="form-control"
  type="text"
  name={"address " + Math.random()}    <--- add random number to prevent Chrome autofill
  required
  placeholder="New York"
  value={location.address}
  onChange={handleInputChange}
/>

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

<!-- add a dummy input element and make sure chrome will auto-populate your username(or address etc) to it -->
<input type="text" style="pointer-events: none; opacity: 0; position: absolute">

pointer-events: none;  => make it not the target of pointer events
opacity: 0;   => make it disappear
position: absolute;   => don't let it break your dom structure

Прекрасно работает в Chrome 75.0.3770.100.

Надеюсь, это поможет.

Это будет работать

<input type="any" readonly onfocus="this.removeAttribute('readonly');">

Альтернативный подход

Основная причина этой проблемы заключается в том, что установка input type = password автоматически приводит к появлению всех сохраненных учетных данных, и кажется, что ничего не работает, чтобы остановить это.

Общая идея этого решения состоит в том, чтобы избежать установки type = password и сделать вводимый текст похожим на поле пароля. К счастью, сделать это в Chrome довольно просто, но, к сожалению, это не работает для Firefox, Internet Explorer и Firefox Android, согласно этой ссылке https://developer.mozilla.org/en-US/docs./Web/CSS/-webkit-text-security

Решение

Вместо использования классического ввода с типом пароля

<input type="password"/>

сделайте следующее:

<input type="text" style="-webkit-text-security: disc;"/>

Надеюсь, это решение будет для вас полезным.