Fluffy Fluffy - 3 months ago 31
Javascript Question

How to disable browser save password functionality?

How do I disable browser save password functionality?

The suggestions from the same questions are no longer working since browsers chose not to support this any more. I don't really want to discuss whether this should be the case or not, just asking for the most simple way to trick browser into not showing send password window.

Answer

Like many people, I used to use the autocomplete=off trick for years. Unfortunately, now that browsers are no longer supporting that attribute, I had to come up with something else. Here is a solution in jQuery that works:

$(function() {
    $('input[type=password]').each(function() {
        $(this).attr('data-background-color', $(this).css('background-color'));
        $(this).css('background-color', $(this).css('color'));
        $(this).attr('type', 'text');

        $(this).focus(function() {
            $(this).attr('type', 'password');
            $(this).css('background-color', $(this).attr('data-background-color'));
        });

        $(this).blur(function() {
            $(this).css('background-color', $(this).css('color'));
            $(this).attr('type', 'text');
        });
    });
});

It won't stop auto-completion, which is the intent of the change to autocomplete, but it will stop password storage managers from detecting a password field in the first place.

How it works: It grabs the background color of the text field after the page finishes loading and squirrels it away (data-background-color). Then it sets the background color to the text color and changes the input type to 'text'. On focus, the field is restored to its previous state (password field with original background color). On blur, the field background color and type are swapped out again. When submitting the form, it is just a text field. You get all the benefits of a password field (e.g. no copying) without a password manager to get in the way when submitting the form.

Notes: It might not work properly if there are special effects on the text itself. It also has some minor keyboard caret focus issues where clicking in the field causes the caret to jump to the beginning of the text instead of where the click took place.

On the plus side, it plays nice with browsers that have Javascript disabled. Progressive enhancement and all that.