输入焦点的浏览器自动填充问题答案

【问题标题】：browser auto fill issue with input focus输入焦点的浏览器自动填充问题
【发布时间】：2018-12-04 00:28:04
【问题描述】：

我有一个登录表单，浏览器已为其保存了用户登录详细信息。所以当我在浏览器中打开这个页面时，它会像这样显示我

但是当我点击页面或按任意按钮时

这是预期的默认行为。

我试过了

document.body.focus()

onload 但这不起作用。

然后我将焦点放在其中一个输入上（在名称上），但是其他字段呢？什么是最好的解决方案？

我知道这种花哨的样式不好，但有解决方法吗？

【问题讨论】：

我认为是标签。当字段被触摸时，您可以简单地将标签设置为顶部
最好的避免方法是，首先不要实施这种“花哨”的样式——只有设计师才会欣赏，但用户往往会为此而苦苦挣扎。 medium.com/simple-human/…
这是在触摸字段时起作用的标签，但是当页面加载时自动填充会填充用户名和密码并且没有焦点，因此它的行为与第一个屏幕截图一样
@CBroe，我明白了，但是有什么解决办法吗？
如果你真的理解并同意，那你为什么还要寻求“解决方案”呢？ :-) google.com/… 表明其他人已经在处理这个问题，所以也许你可以从他们的解决方案中获得一些灵感（如果他们真的找到了。）

标签： javascript html css autofill

【解决方案1】：

您需要在登录表单的元素中添加 active 类：

例如：

<input id="password" placeholder="Password" name="password" type="password" class="active">

或者在css中添加下面的代码sn-p：

input:-webkit-autofill { +label { @extend .active; } } }`

让我知道这是否有效，谢谢。

【讨论】：

你能解释一下吗？
成功了吗？否则请在此处查看所有可能的解决方案：github.com/Dogfalo/materialize/issues/…

【解决方案2】：

试试这个

.login-form{

  width: 50%;
  }

form div{
padding: 10px;
}

form div label, form div .fa{
color: blue;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<form class="login-form text-center">
    <h4>Sign in</h4>

 
    <div class="md-form">
        <i class="fa fa-envelope prefix grey-text"></i>
          <label for="materialFormLoginEmailEx">Your email</label><br>
        <input type="email" id="materialFormLoginEmailEx" class="form-control" placeholder="Admin">
      
    </div>

  
    <div class="md-form">
        <i class="fa fa-lock prefix grey-text"></i>
        <label for="materialFormLoginPasswordEx">Your password</label><br>
        <input type="password" id="materialFormLoginPasswordEx" class="form-control" placeholder="Password">
        
    </div>

    <div class="login-btn">
        <button class="btn btn-default" type="submit">Login</button>
    </div>
</form>

【讨论】：

【解决方案3】：

我在使用 React 和 Styled Components 时遇到了这个确切的问题。为了解决这个问题，我在我的样式组件中使用了以下 css（这是一个 <label>）：

input:-webkit-autofill + &

这通过检查输入中的自动填充并在为 true 时应用我们所需的样式来工作。

注意：您可能需要将& 替换为input。

【讨论】：