Как намекнуть Google Smart Lock на использование определенного поля ввода в качестве имени пользователя, если над полем ввода скрытого имени пользователя есть активное поле ввода

Question

Этот вопрос похож на этот Как намекнуть Google Smart Lock на использование определенного поля ввода в качестве имени пользователя на веб-сайте .

Решение, предоставленное на вопрос, недействительно работает для моего случая.Мой вариант использования отличается тем, что над скрытым полем имени пользователя есть дополнительное активное поле ввода.Google Smart Lock извлечет значение из активного поля ввода вместо моего скрытого поля ввода имени пользователя

Это Документ Chromium Design , говорящий о Google Smart Lock, будет использовать display: none имя пользователя, но этоне упоминает мой случай использования.

div {
  margin: 3px;
}

#email {
  display: none;
}

<form>
  <div>
    <label>Verification Code</label>
    <input type='text' />
  </div>
  <div>
    <input type='email' autocomplete='username' id='email' />
  </div>
  <div>
    <label>Password</label>
    <input type='password' autocomplete='new-password' />
  </div>
  <input type="submit" value="Verify">
</form>

Answer 1

короткий ответ, сначала введите скрытый ввод электронной почты, а затем используйте css для изменения порядка:

.flex-container {
  display: flex
  flex-direction: row;
}

Ознакомьтесь с этой статьей , в которой объясняется, как заставить ее работать в Chrome, Firefoxи Safari для 3 разных случаев: обычный вход в систему, имя пользователя, первый вход в систему и страница сброса пароля с проверочным вводом вначале.