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，其中介绍了在3种不同情况下如何使其在Chrome，Firefox和Safari上运行的方法：正常登录，用户名优先登录和密码输入优先验证页面。

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

1 个答案: