在用户与页面交互之前，JavaScript 无法读取 Chrome 的自动填充密码字段

Posted 2023-02-24

【中文标题】在用户与页面交互之前，JavaScript 无法读取 Chrome 的自动填充密码字段

【英文标题】：JavaScript can't read Chrome's auto-fill password field until the page is interacted with by the user

【发布时间】：2016-05-26 18:22:34

【问题描述】：

查看此处发生的问题：

https://gfycat.com/BelatedLawfulBighorn

问题在于，在用户与页面交互之前（在本示例中，我只是在密码字段内单击），如果密码字段由 Chrome 自动填充，javascript 将无法读取该字段。这是我的结局吗？这是 Chrome 内置的一些安全功能吗？

为了排除某些问题，以下是我尝试过的方法，但都没有奏效：

使用原版 JS 以编程方式触发页面某处的点击 让任何输入字段专注于页面加载 在几百毫秒的超时后让任何输入字段关注页面加载

【问题讨论】：

这看起来与***.com/questions/21158247/… 非常相似。但你实际上想做什么？如果您在用户单击登录按钮时尝试获取密码，那么您可以侦听单击事件并获取密码输入的值。

不，不是通过登录按钮。我自动聚焦用户名字段，所以很多用户尝试点击“enter”登录。当只点击“enter”时尝试获取密码字段的值时，它是空白的。我知道我可以删除自动对焦，并强制他们点击登录，但我不想通过让用户更难来解决问题。

【参考方案1】：

解决了我自己的问题！

如果我将所有内容都放在一个表单中，而不是监听“enter”keydown 事件，而是监听表单上的“submit”事件，那么 JavaScript 可以读取我的密码字段的值。

【参考方案2】：

在用户与页面交互之前，无法读取这些值。

原因是，事件具有 isTrusted 属性。 “Event 接口的 isTrusted 只读属性是一个布尔值，当事件由用户操作生成时为真，当事件由脚本创建或修改或通过 EventTarget.dispatchEvent() 调度时为假。” （来自https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted）。

Chrome 自动填充值只能通过 isTrusted=true 事件读取。

注意：window.scroll() 始终具有 isTrusted=true。但它不会使自动填充值可读！