Javascript 带有输入焦点的浏览器自动填充问题

我有一个登录表单，浏览器保存了该表单的用户登录详细信息。因此，当我在浏览器中打开此页面时，它会显示如下内容

但当我点击页面或按下任何按钮时

这是预期的默认行为

我试过了

document.body.focus()

onload

但这不起作用

然后我将焦点设置在其中一个输入上（在名称上），但另一个字段呢？这方面的最佳解决方案是什么

---

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

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

例如：

或者将下面的代码片段添加到css中：

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

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

试试这个

。登录表单{
宽度：50%；
}
表格组{
填充：10px；
}
表格分区标签，表格分区fa{
颜色：蓝色；
}

登录
您的电子邮件

您的密码

登录

我在使用React和样式化组件时遇到了这个问题。为了解决这个问题，我在我的样式化组件（这是一个

）中使用了以下css：

input:-webkit自动填充+&

这是通过检查输入中的自动填充并应用我们所需的样式（如果为真）来实现的

---

注意：您可能需要将

&

替换为

输入

我认为其中一个就是标签。你可以简单地将你的标签设置为顶部，当触碰字段时，最好的避免方法是，首先不要实施这样的“花哨”样式——只有设计师欣赏，但用户往往很难做到这一点。这是一个标签，当触摸该字段时，该标签起作用，但当页面加载autofill时，它填充用户名和密码，并且没有焦点，因此它的行为与第一个相同screenshot@CBroe，我理解，但有什么解决办法吗？如果你真的理解并同意，那你为什么还要要求一个“解决办法”？：-）表明其他人已经在处理这个问题，所以也许你可以从他们的解决方案中得到一些启发（如果他们真的发现了）。你能解释一下吗？成功了吗？否则，请在此处查看所有可能的解决方案：