检测自动填充和停止对焦

Posted 2023-02-24

【中文标题】检测自动填充和停止对焦

【英文标题】：Detect auto fill and stop focus

【发布时间】：2018-01-23 15:33:44

【问题描述】：

我有一个在一个非常图形化的网络应用程序中构建的表单，并且字段跨越许多屏幕。

当用户在他们的浏览器中使用自动填充功能（即 chrome，用于取消开发人员停止自动填充的能力）时，自动填充焦点会放在最后编辑的字段上。

这个问题是因为我们每个屏幕都有几个输入字段，当自动填充从名称字段开始填写信息时，它会自动填充到更远的地址并跳过许多字段和屏幕并破坏应用程序的其他一些视觉方面。

在闲置的世界中，将自动完成设置为关闭就足够了，但由于 chrome，这不会发生。所以我现在需要的是一种可行的方法来阻止焦点将屏幕空间转移到最后一个字段。

但我不确定如何检测自动填充事件（如果有）或如何使用 JS 或 jQuery 粗略检测它。

【问题讨论】：

完全只是吐痰，但是如果您更改了输入字段的名称和 id 以使 chrome 不知道要自动填充什么？

这可能对***.com/a/46874056/1819684有帮助

【参考方案1】：

是否存在导致问题的 html 结构或 javascript 行为的特定内容？我在 JSBin 中创建了一个测试页面，以尝试隔离最后一个自动填充字段是否正在吸引焦点，并且在 Opera 中进行测试时（我的 Chrome 自动填充设置被我的公司管理员锁定为关闭），我没有滚动到那个领域。试一试，也许可以发布一些您的 HTML 结构供我们试用：

http://jsbin.com/qomege/edit?html,output

<form>
  <div>name: <input type="text" name="name" /></div>
  <div>email: <input type="text" name="email" /></div>
  <div>address: <input type="text" name="address" /></div>
  <div>city: <input type="text" name="city" /></div>
  <div>state: <input type="text" name="state" /></div>
  <div style="padding-top:640px;">zip:<input type="text" name="zip" /></div>
  <div><input type="submit" /></div>
</form>

【讨论】：

我真的在寻求一种检测自动填充的方法。

如果是这种情况，那么这是一个更简单的问题，您可以在这里查看：***.com/questions/11708092/detecting-browser-autofill 我还要补充一点，您可以将 focus() 和 focusOut() 事件处理程序附加到您的字段，跟踪用户正在使用的字段。如果你得到一个由当前没有焦点的东西触发的 onChange() 事件，那么这可能是一个很好的指示是否正在使用自动填充。

【参考方案2】：

怎么样：

setTimeout(focusTheFirstInput, 0);

据我所知，如果您更改输入的名称和 ID，则 chrome 将无法找到要填充的正确输入，您也可以尝试删除输入的“自动完成”属性，如果它们有一个。