html - "AutoComplete=Off"无法在 Google Chrome 浏览器上运行

标签 html google-chrome forms

<分区>

我知道 Stackoverflow 上有一个类似的问题,但没有一个解决方案对我有用。

<form autocomplete="off" id="search_form" method="post" action="">
    <input autocomplete="off" type="text" />
</form>

如您所见,我在表单和输入字段上都设置了 autocomplete=off,但 Google Chrome 仍会显示此自动完成列表。这不会发生在其他浏览器中,例如 Firefox 和 Safari。

除了在表单标签上放置 autocomplete=off 之外还有其他解决方案吗??

最佳答案

这是由于 Chrome 做出的设计决定(可以说任何 Chrome 用户想要这种行为)。

Google 称之为 priority of constituencies 的原因。 :

  1. 用户为王!他们想要什么
  2. 用户想要使用密码或自动填充管理器。
  3. Web 应用程序表示它不想保存表单值。
  4. 用户的选择更重要,所以表单值被保留。

有多种变通方法,但这些方法很可能会在未来的 Chrome 版本中得到修复,因为 Chrome 开发人员认为他们的行为是正确的,而您的变通方法是错误。

即使您的解决方法确实有效,它也会让用户产生混淆行为 - 他们希望自动填充能够根据他们的设置工作。

许多用户已经选择使用插件或脚本忽略应用程序自动完成设置,这些插件或脚本只会删除页面中的任何 autocomplete=off - 他们已经有了这个选择。

您最好在设计时假设自动完成可以工作并考虑到这一点。

我个人讨厌网站不记得我的密码并覆盖那些与浏览器扩展有关的密码。然而,我也为我的工作创建了应用程序,并且记忆密码被视为一种安全风险,因为用户可能会让他们的机器处于解锁状态。在我个人看来,用户不锁定他们的机器是本地 IT 的问题,而不是应用程序的问题,如果用户不可信,本地 IT 可以禁用所有 Web 应用程序的所有密码自动完成。

不幸的是,为了通过安全检查,一些应用程序仍然必须禁用自动完成,虽然有很多方法可以做到,但它们都很糟糕。第一个 hack 是使密码输入全新:

<input type="hidden" name="password" id="realPassword" />
<input type="password" name="{randomly generated}" 
    onchange="document.getElementById('realPassword').value = this.value" />

为了简化,我已经内联了所有内容,但这应该让您对黑客有所了解 - 没有插件或浏览器可以使用全新的名称自动填充输入。

如果您正确构建 ARIA 和标签(因为这允许浏览器/扩展程序查找并自动填充来自标签的输入),此解决方案就会中断。

所以选项 2,也是可怕的,是等到自动完成触发之后,然后空白字段:

<input type="text" name="username" 
    onchange="window.setTimeout(function() { 
        document.getElementById('password').value = ''; 
    }, 100)" />
<input type="password" id="password" />

就像我说的,讨厌。

关于html - "AutoComplete=Off"无法在 Google Chrome 浏览器上运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18306052/

相关文章:

php - 更改时自动更新 MySQL 行

android - 字体系列 "cursive"在 chrome mobile v47 中不起作用

php - 网页中的 MySQL UPDATE 查询错误

javascript - 带有 Formik 的 React-Native 选择器

javascript - CSS 在表格单元格中旋转内容并调整高度

javascript - 如何从 HTML 按钮中删除效果?

css - 为什么选择框选项中的 padding-left 在 Chrome 中不显示,但在 FF 中有效?

javascript - 无法使用 contentscript chrome 扩展将 iframe 添加到页面中

javascript - 使用javascript动态表单提交——如何优雅的代码?

html - 按钮内的图标不会触发 React 上的附加功能