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 post that offers a secure solution for this issue. Is there really no way to disable the password bubble in Chrome??
Chrome. Click the Chrome menu in the toolbar and choose Settings. Click Passwords. Turn off Offer to save passwords.
Another way is to type chrome://settings/passwords in the address bar and press Enter. In the Passwords settings, click or tap on the switch called “Offer to save passwords” to disable it and turn off the Chrome password manager. That was it!
I want to disable the save password pop-up bubble using JavaScript. How to do this? chrome just made this un-disable-able from html/js, but skipping the name attrib on the input should prevent the pop-up. you will have to add the name in with JS before the form submits.
I found there is no "supported" way to do it.
What I did was copy the password content to a hidden field and remove the password inputs BEFORE submit.
Since there aren't any passwords fields on the page when the submit occurs, the browser never asks to save it.
Here's my javascript code (using jquery):
function executeAdjustment(){
$("#vPassword").val($("#txtPassword").val());
$(":password").remove();
var myForm = document.getElementById("createServerForm");
myForm.action = "executeCreditAdjustment.do";
myForm.submit();
}
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.
Add <input type="password" style="display:none"/>
to the top of your form. Chrome's autocomplete will fill in the first password input it finds, and the input before that, so with this trick it will only fill in an invisible input that doesn't matter.
The best solution is to simulate input password with input text by replacing value with asterisks or dots manually.
<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>
tested in Firefox and chrome working as expected.
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>
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:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With