如何使用Javascript禁用chrome中的保存密码气泡?

时间:2014-04-20 00:45:50

标签: javascript html angularjs google-chrome internet-explorer-8

我需要能够在用户登录后阻止保存密码气泡显示。

自动完成=关闭不是答案。

我没有遇到过为这个问题提供安全解决方案的帖子。是否真的无法在Chrome中禁用密码气泡?

12 个答案:

答案 0 :(得分:19)

我发现没有"支持"这样做的方法。

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

由于提交时页面上没有任何密码字段,浏览器永远不会要求保存。

这是我的javascript代码(使用jquery):

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

答案 1 :(得分:16)

经过几个小时的搜索,我找到了自己的解决方案,似乎可以在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,因为浏览器会检测到并隐藏隐藏字段,即使字段本身未隐藏但是被隐藏在一个隐藏的包装中。因此,CSS类的原因主要是使输入字段不可见且不可忽略而不“隐藏”它们。

答案 2 :(得分:4)

<input type="password" style="display:none"/>添加到表单顶部。 Chrome的自动填充功能会填写它找到的第一个密码输入,以及之前的输入,因此只需填写一个不重要的无形输入。

答案 3 :(得分:3)

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

答案 4 :(得分:2)

<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中测试按预期工作。

答案 5 :(得分:1)

我找不到具备我需要的所有好处的替代品,创造了一个新的。

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(截至今日)

答案 6 :(得分:0)

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

我的代码片段在asp:

&#13;
&#13;
$(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);
  })
});
&#13;
style... .password {
  font-family: monospace;
  position: absolute;
  background-color: white;
}
&#13;
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" />
&#13;
&#13;
&#13;

答案 7 :(得分:0)

我遇到两个问题,当浏览器在常规页面中的支持登录页面上工作时,浏览器如何强制他们的密码行为(永远不应保存支持登录):

  1. 浏览器会建议从页面的其余部分进行登录。
  2. 浏览器会要求保存输入的技术密码。
  3. 所以我结合了我在各种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>
    

    截至9/12/2017,这对我和Firefox和Chrome都有用。

答案 8 :(得分:0)

我自己的解决方案jQuery与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" />

答案 9 :(得分:0)

我使用以下标记进行了处理。

#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>

答案 10 :(得分:-2)

如果您选择让Google Chrome保存网站密码,则每次登录新网站时都会看到提示。如果在提示中单击“从不”这个站点,则不会保存站点的密码,并且该站点将添加到从未保存的密码列表中。

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

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

答案 11 :(得分:-2)

首先,我想告诉你一些事情。 当你[input type="text"][input type="password"]时 主流浏览器为您提供弹出窗口。

现在,将[input type="password"]替换为[input type="text"] 然后有css那个

#yourPassTextBoxId{

-webkit-text-secutiry:disc

}