如何使用 Javascript 在 chrome 中禁用保存密码气泡？

Question

我需要能够防止在用户登录后甚至出现保存密码气泡。

Autocomplete=off 不是答案。

我还没有遇到过为这个问题提供安全解决方案的帖子。 真的没有办法禁用Chrome中的密码气泡吗？？

Answer 1

我发现没有“支持”的方式来做到这一点。

我所做的是将密码内容复制到隐藏字段并在提交之前删除密码输入。

由于提交发生时页面上没有任何密码字段，浏览器从不要求保存它。

这是我的 javascript 代码（使用 jquery）：

function executeAdjustment(){       
        $("#vPassword").val($("#txtPassword").val());
        $(":password").remove();        
        var myForm = document.getElementById("createServerForm");
        myForm.action = "executeCreditAdjustment.do";
        myForm.submit();
    }

Answer 2

经过数小时的搜索，我想出了自己的解决方案，它似乎适用于 Chrome 和 Safari（虽然不适用于 Firefox 或 Opera，而且我还没有测试过 IE） 。 诀窍是用两个虚拟字段包围密码字段。

<input type="password" class="stealthy" tabindex="-1">
<input type="password" name="password" autocomplete="off">
<input type="password" class="stealthy" tabindex="-1">

这是我使用的 CSS：

.stealthy {
  left: 0;
  margin: 0;
  max-height: 1px;
  max-width: 1px;
  opacity: 0;
  outline: none;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  top: 0;
  z-index: -1;
}

注意：虚拟输入字段不能再用display: none隐藏display: none像许多人建议的那样，因为浏览器检测到并忽略隐藏字段，即使字段本身不是隐藏的而是包含在隐藏的包装器中。 因此，CSS 类本质上是在不“隐藏”它们的情况下使输入字段不可见和不可点击的原因。

Answer 3

将<input type="password" style="display:none"/>到表单顶部。 Chrome 的自动完成功能将填充它找到的第一个密码输入，以及之前的输入，所以使用这个技巧，它只会填充一个无关紧要的不可见输入。

Answer 4

最好的解决方案是通过手动用星号或点替换值来模拟输入文本的输入密码。

Answer 5

<input type="textbox" id="UserID" />
<input type="password" style="display:none"/>
<input type="textbox" id="password" />

<script>
  function init() {
       $('#password').replaceWith('<input type="password" id="password" />');
  }     
</script>

在 Firefox 和 chrome 中测试按预期工作。

Answer 6

我使用以下标记处理了这个问题。

 #txtPassword { -webkit-text-security: disc; }

 <form autocomplete="off"> <input type="text" name="id" autocomplete="off"/> <input type="password" id="prevent_autofill" autocomplete="off" style="display:none" tabindex="-1" /> <input type="password" name="password" id="txtPassword" autocomplete="off"/> <button type="submit" class="login100-form-btn">Login</button> </form>

Answer 7

我找到了我需要的所有好处的替代品，所以创建了一个新的。

HTML

<input type="text" name="password" class="js-text-to-password-onedit">

jQuery（如果您不使用 jQuery，则用具有相同逻辑的 vanilla JS 替换）

$('.js-text-to-password-onedit').focus(function(){
    el = $(this);
    el.keydown(function(e){
      if(el.prop('type')=='text'){
        el.prop('type', 'password');
      }
    });
    // This should prevent saving prompt, but it already doesn't happen. Uncomment if nescessary.
    //$(el[0].form).submit(function(){
    //  el.prop('readonly', true);
    //});
});

好处：

• 不触发提示
• 不触发自动填充（不在页面加载时，也不在类型更改时）
• 只影响实际使用的输入（允许在复杂环境中不受干扰的元素克隆/模板）
• 按类别选择器
• 简单可靠（没有新元素，保持附加的 js 事件，如果有的话）
• 截至今天，已在最新的 Chrome 61、Firefox 55 和 IE11 上测试并运行

Answer 8

首先我想告诉你一件事。 当您使用[input type="text"]和[input type="password"]主要浏览器会为此提供弹出窗口。

现在，将[input type="password"]替换为[input type="text"]然后就有了 css

#yourPassTextBoxId{

-webkit-text-secutiry:disc

}

Answer 9

我通过使用 2 个常规文本框颠覆了这一点。 一个包含实际密码，一个用作掩码。 然后我将密码框的不透明度设置为 0 并禁用遮罩文本框 - 但背景颜色设置为白色使其显示为启用。 然后我将密码框放在掩码框的顶部。 在 jscript 函数中，我更新掩码的文本值以在密码框中的每次按键时显示一串“*”字符。 两个缺点：闪烁的光标现在可能会根据您的浏览器显示。 它在 IE 中显示，但在 Chrome 或 Firefox 中不显示。 用户打字时会有一点延迟。

我的代码片段在asp中：

 $(window).ready(function() { var pw = $('#txtPassword'); var mask = $('#txtMask'); $(pw).css('opacity', '0'); $(pw).keyup(function() { var s = ''; for (var i = 0; i < $(pw).val().length; i++) s = s + '*'; mask.val(s); }) });

 style... .password { font-family: monospace; position: absolute; background-color: white; }

 Asp.net code: <asp:TextBox runat="server" CssClass="password" Width="300" ID="txtMask" ClientIDMode="Static" MaxLength="30" Enabled="false" /> <asp:TextBox runat="server" CssClass="password" Width="300" ID="txtPassword" ClientIDMode="Static" MaxLength="30" />

Answer 10

在常规页面中的仅支持登录页面上工作时，浏览器如何将密码行为强加给您，我有两个问题（永远不应保存支持登录）：

1. 浏览器将推荐从页面的其余部分进行登录。
2. 浏览器将要求保存输入的技术密码。

所以我结合了我在各种 stackoverflow 帖子中找到的两个解决方案，并认为我会在这里发布它们。 我正在使用 jQuery，但该原理也可以转换为常规 JavaScript。

首先，让您的密码字段作为文本字段开始，然后让 JavaScript 更改它——这给浏览器提供了一个不错的机会，即浏览器不会提供保存的密码。

其次，就在提交表单之前，将密码表单重新设置为文本字段，但先将其隐藏，以免密码可见。 当密码字段消失时，可以通过添加另一个文本字段来使这看起来更漂亮，但这只是装饰性的。

<form id="techForm" action="...">
<input type="text" id="username" name="username">
<input type="text" id="password" name="password"> <!-- this needs to start as a text field -->
<input type="submit" name="submit" value="submit">
</form>
<script type="text/javascript">
$(function()
{
  $('#password').on('focus', function()
  {
    $(this).prop('type', password');  // this stops pre-saved password offers
  });
  $('#techForm').on('submit', function()
  {
    $('#password').hide().prop('type', 'text');  // this prevents saving
  });
});
</script>

截至 2017 年 9 月 12 日，这在 Firefox 和 Chrome 上对我有用。

Answer 11

唯一对我有用的是在文档准备好后为输入值添加一个空格，然后在用户专注于输入时删除该空格。

$('.login-input').val(' ');
$('.login-input').on('focus', function() {
    $(this).val('');
});

简单易行。 适用于 Chrome 64。在 Firefox 中，您只需要在输入中添加autocomplete="off"属性。

Answer 12

我自己的解决方案 jQuery with PrimeFaces。 在 Chrome 和 Internet Explorer 中但在 mozilla firefox 中测试工作（虽然不在 Firefox 中）

<script  type="text/javascript" charset="utf-8">
$(function(){
    $('#frmLogin').on('submit',function(e){

        $(PrimeFaces.escapeClientId('frmLogin:usuario')).replaceWith('<label id="frmLogin:usuario1" type="text" name="frmLogin:usuario1" autocomplete="off" class="form-control" maxlength="8"  tabindex="2"/>');
        $(PrimeFaces.escapeClientId('frmLogin:password')).replaceWith('<label id="frmLogin:password1" type="password" name="frmLogin:password1" autocomplete="off" value="" tabindex="3" class="form-control"/>');
        $(PrimeFaces.escapeClientId('frmLogin:password1')).attr("autocomplete","off");
        $(PrimeFaces.escapeClientId('frmLogin:usuario1')).attr("autocomplete","off");
        $(PrimeFaces.escapeClientId('frmLogin:password_hid')).attr("autocomplete","off");
        $(PrimeFaces.escapeClientId('frmLogin:usuario_hid')).attr("autocomplete","off");

    });
});
</script>

<h:inputSecret id="password" value="#{loginMB.password}" class="form-control" 
    placeholder="Contraseña" tabindex="3"  label="Contraseña" autocomplete="off" disabled="#{loginMB.bdisabled}"/>
    <p:inputText value="#{loginMB.password_hid}" id="password_hid" type="hidden" />

Answer 13

如果您选择让 Chrome 浏览器保存网站密码，则每次登录新网站时都会看到提示。 如果您在提示中为此站点单击从不，则不会保存您的站点密码，并且该站点将添加到从未保存的密码列表中。

您可以编辑此列表并禁用提示：

单击浏览器工具栏上的 Chrome 菜单 Chrome 菜单。 选择设置。 单击显示高级设置。 单击管理保存的密码。 在出现的密码对话框中，向下滚动到底部的“从不保存”部分。 要从此列表中删除站点，请选择它并单击出现在该行末尾的 X。 现在重新访问该网站，如果您允许 Google Chrome 显示提示，您应该会看到再次保存密码信息的提示。