当隐藏的用户名输入字段上方有活动输入字段时，如何提示 Google Smart Lock 使用特定输入字段作为用户名

Question

这个问题与 How to hint Google Smart Lock to use a specific input field as the username in a website 类似。

针对该问题提供的解决方案对我的情况并不适用。我的用例的不同之处在于隐藏的用户名字段上方有一个额外的活动输入字段。 Google Smart Lock 将从活动输入字段而不是我隐藏的用户名输入字段获取值

这是 Chromium Design document 谈论 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;
}

查看 this article，了解如何在 Chrome、Firefox 和 Safari 上运行 3 种不同情况：正常登录、首先使用用户名登录和首先使用验证输入重设密码页面。

当隐藏的用户名输入字段上方有活动输入字段时，如何提示 Google Smart Lock 使用特定输入字段作为用户名

How to hint Google Smart Lock to use a specific input field as the username when there is an active input field above the hidden username input field

html

forms

google-chrome

google-smartlockpasswords