'Prevent Browsers not to remember password

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.

enter image description here

javascripthtmlformsauthenticationform-fields


Solution 1:[1]

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

Solution 2:[2]

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.

Solution 3:[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.

Solution 4:[4]

This is Tricky

The reason is browser always watch input field type when we submit.

example

<input type="password">

when use div tag browser does not show (save popup)

example(you want to write some huge logic to hide password)

<div contenteditable="true">username</div>
<div contenteditable="true">password</div>

otherwise you want to manually disable autofilling and popup in your browser

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 vaasav kumar
Solution 2 Splox
Solution 3
Solution 4 ßãlãjî

Related Questions