Prevent Browsers not to remember password

Question

We have an application with a login screen which has input field text and password. What I am trying to achive here is;

1. Prevent browsers to ask if, user wants it to be memorized by browser.
2. Prevent all browsers not to memorize that field at any situation. Even if you said "yes", I want all the browsers ignore that field entirely.

The things I tried;

1. I tried to use autocomplete="off" on both form and inputs but with the new Firefox version, it doesn't seem to work.
2. I inserted an non-displayed input password field to trick the browser. But it is bad for accessibility. It also lowers the usability score.
3. I tried to make autocomplete="new-password" but internet explorer completely ignores it.. (like I am surprised)

So if anyone achieved a good result with any other solutions, and if it could be shared, it would be a great contribution to developer community.

Answer 1

You cannot do this while using an input field for passwords. I also strongly advise against you using a regular input field, because many browsers save inputs to those too (but in plain text).

Using a text box inside a canvas is not good for accessibility, and it also is completely incompatible with older browsers.

Your best bet is going to be creating a hidden div that you can type in via contenteditable, and then creating a fake password entry overlay that adds a • every time you type a character. This has the exact same level of treatment from the browser as a regular password input, but the browser won't prompt you to save it.

Answer 2

This cannot be prevented from scripts, the only way to prevent is you can disable Autofill in Browser Settings.

Answer 3

You should put text input box inside a canvas.
Take a look at CanvasInput and canvas-text-editor.

By using canvas to draw input box you can trick browsers.

or you can use contenteditable on a div.