How do I disable the save password bubble in chrome using Javascript?

Question

I need to be able to prevent the Save Password bubble from even showing up after a user logs in.

Autocomplete=off is not the answer.

I have not come across a

Answer 1

I handled this with the following markup.

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

After hours of searching, I came up with my own solution, which seems to work in Chrome and Safari (though not in Firefox or Opera, and I haven't tested IE). The trick is to surround the password field with two dummy fields.

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

Here's the CSS I used:

.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;
}

Note: The dummy input fields can no longer be hidden with display: none as many have suggested, because browsers detect that and ignore the hidden fields, even if the fields themselves are not hidden but are enclosed in a hidden wrapper. Hence, the reason for the CSS class which essentially makes input fields invisible and unclickable without "hiding" them.

Answer 3

I found no alternative with all the benefits I need so, created a new one.

HTML

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

jQuery (replace with vanilla JS with same logic if you don't use jQuery)

$('.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);
    //});
});

Benefits:

• Does not trigger prompt
• Does not trigger auto fill (not on page load, nor on type change)
• Only affects inputs that are actually used (allowing undisturbed element cloning/templating in complex environments)
• Selector by class
• Simple and reliable (no new elements, keeps attached js events, if any)
• Tested and works on latest Chrome 61, Firefox 55 and IE11 as of today

Answer 4

First of all I wanna tell you something. When you take [input type="text"] and also [input type="password"] Major browsers give you popup for that.

Now, replace [input type="password"] to [input type="text"] then there is css for that

#yourPassTextBoxId{

-webkit-text-secutiry:disc

}

Answer 5

If you choose to let Google Chrome save website passwords, you'll see a prompt every time you sign in to a new website. If you click Never for this site in the prompt, your password for the site is not saved and the site is added to a list of passwords that are never saved.

You can edit this list AND DISABLE THE PROMPT:

Click the Chrome menu Chrome menu on the browser toolbar. Select Settings. Click Show advanced settings. Click Manage saved passwords. In the Passwords dialog that appears, scroll down to the "Never saved" section at the bottom. To remove a site from this list, select it and click the X that appears the end of the row. Now revisit the website and you should see the prompt to save your password information again, if you've allowed Google Chrome to show the prompt.

Answer 6

I had two issues with how browsers force their password behavior on you when working on a support-only login page within a regular page (the support login should never be saved):

1. The browser will recommend a login from the rest of the page which gets in the way.
2. The browser will ask to save the entered tech password.

So I combined two solutions I found on various stackoverflow posts and thought I'd post them here. I'm using jQuery, but the principle can be translated into regular JavaScript as well.

First, have your password field start as a text field and have JavaScript change it later - this gives a decent chance that the browser won't offer a saved password.

Second, just before submitting the form, set the password form back to being a text field, but hide it first so the password can't be seen. This could be made to look prettier by adding another text field when the password field disappears, but that's cosmetic only.

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

This worked for me on Firefox and Chrome as of 9/12/2017.