Реагировать материализовать Изменить тип ввода с «пароль» на «новый пароль»

Question

У меня есть две формы в проекте React: Зарегистрироваться и Войти. Я использую Materialise.

<div className="input-field col s12">
     <i className="material-icons prefix">vpn_key</i>
     <input id="password" type="password" className="validate" required />
     <label htmlFor="password">Password</label>
</div>

И React показывает предупреждения:

Input elements should have autocomplete attributes (suggested: "new-password")

Input elements should have autocomplete attributes (suggested: "current-password")

Когда я меняю тип на type="new-password" - больше нет предупреждений, но ввод Материализации поле не работает должным образом ... У кого-нибудь была такая проблема, и как ее можно решить?

Answer 1

Вам просто нужно установить атрибут autocomplete.

<div className="input-field col s12">
  <i className="material-icons prefix">vpn_key</i>
  <input
    autoComplete="current-password"
    id="password"
    type="password"
    className="validate"
    required
  />
  <label htmlFor="password">Password</label>
</div>

Тип ввода и атрибуты автозаполнения - это не одно и то же. Тип ввода указывает, какой тип ввода это: текст, флажок, пароль и т. Д. c .., но автозаполнение - это подсказка (подсказка) для браузера, для чего на самом деле может использоваться ввод. В этом случае current-password намекает браузеру на автоматическое заполнение любых сохраненных паролей, а new-password - по понятной причине.

"новый пароль"

пароли это следует использовать для поля «Введите новый пароль» или «Подтверждение нового пароля», в отличие от общего поля «Введите ваш текущий пароль», которое может присутствовать. Это может использоваться браузером как во избежание случайного заполнения существующего пароля, так и для оказания помощи в создании безопасного пароля (см. Также «Предотвращение автозаполнения с помощью autocomplete =« new-password »). Новый пароль. При создании новой учетной записи или изменении

«текущий пароль»

Текущий пароль пользователя.