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

Question

这与如何提示 Google Smart Lock 使用特定输入字段作为网站中的用户名类似的问题。

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

这是Chromium 设计文档，讨论 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;
}

查看这篇文章，它解释了如何在 3 种不同情况下使其在 Chrome、Firefox 和 Safari 上运行：正常登录、用户名优先登录和重置密码页面，首先验证输入。