How to prevent the browser from auto-filling and auto-completing form fields?

One line summary :autocomplete="new-password"

You are using a field of type password. Regardless of whether you have the property autocomplete="off", browsers will ask the user if they want to save the password. And in the case that the user accepts, the browser will try to autocomplete it.

This functionality was developed starting with Firefox 38 , Chrome 34 and IE 11 as a security measure.

Since it is considered that thanks to that, users can now put a ridiculously complicated password (or not) and never remember it, hoping that the browser will autocomplete their passwords.

Anyway, it was thought that to disable this behavior (the autofill even after saving the password ), the property could be used autocomplete="new-password".

<input mdInput type="password" 
               placeholder="Contraseña"
               [formControl]="formGroup.controls['password']"
               autocomplete="new-password"
               #password>

However, autocomplete="new-password"it is not generally implemented. But anyway, if the browser doesn't understand the assigned value, it's not going to try too hard. Therefore; autocomplete="cualquier-cosa"should also work for you.

It may not be what you expect but the only way I was able to achieve it was by emulating the input with a divand the property contenteditable.

Now angular doesn't recognize divs as elements like it does with a <input type="text" />by updating the ngModelwith each typed letter, so I had to create a directive so that it would update the model whenever the user types in the div.

I apologize that the example is in angularjs 1.* since I don't know angular2 but you will have the idea of ​​how to do it:

angular.module("app",[])
.controller("ctrl",function($scope){
  
  $scope.modelo = {
    usuario: ""
    
  }
  
  $scope.$watch("modelo.usuario",function(newVal, oldVal){
    console.log(newVal);
  })
}).directive("contenteditable", function($parse){
  return {
    restrict:"A",
    link:function($scope, $element, $attr){
      
      var ngModel = $parse($attr.ngModel);
      $element.on("keyup",function(){
        ngModel.assign($scope, this.innerText);
        $scope.$apply();
      })
    }
    
  }
  
})

.editable-div{
  border:solid 1px #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">

<input type="hidden" ng-value="model.usuario" name="contrasena"/>

  <div contenteditable class="editable-div"
    ng-model="modelo.usuario"></div>
  <div>
    {{modelo.usuario}}
  </div>
 </div>

In essence, what it does is that for every keyup on the div, it updates the model assigned to the div.

Now the formdoesn't recognize the attribute nameon a div to send it to the server. For that you just have to create an input[hidden] and assign the value of the model to it like this in the example. I will leave this just as an example in case it is necessary.

Browsers have not yet agreed on what to use and you can see the problems that this causes us. In my case, the autocomplete="off" attribute worked for me by putting it in the form in chrome v60.0.3112.90 and Edge v40.15063.0.0, but maybe not everyone has an updated browser and not everyone uses chrome or edge.

It's not the most elegant solution but it works perfectly. So no negative points.

What you are trying to do, disable autocomplete, goes against the premises promoted by companies like Google in which said prerogative corresponds to the user.

If you persist in the intention, the first thing is to try what the Mozilla Developer Network recommends

1. use autocomplete="off"orautocomplete="nope"

The above can fail in browsers like Chrome because, as previously mentioned for Google, the prerogative of autocompletion is the user's, not the developer's. In this case, remember that the autocomplete relies on hints to be able to match the data stored in the browser with the form data like

• labelthe fields label
• attributes like nameandid

If possible, use unique labels and names.

Instead of password or password try with "password". Instead of Email try with identifier

Another thing to try is to duplicate the fields by putting the first ones hidden since usually only the first occurrence is autocompleted.

On the other hand, in addition to the form auto-completion function, modern browsers have an independent function of saving usernames and passwords, which makes it even more difficult for the developer to prevent these data from being filled in automatically.

About the code in stacksnippet

The OP mentions that autocomplete="off"it does not work but it is not included in the code, but instead the attribute is included appnoautocomplete="".

References

• How to Turn Off Form Autocompletion
• “AutoComplete=Off” not working on Google Chrome Browser [duplicate]
• Chrome Browser Ignoring AutoComplete=Off
• Disable browser 'Save Password' functionality

Well, it seems that autocompleteit was used a lot in the past in versions like IE11, Chrome 34 and Firefox 30 , so it is not feasible to use it at all. However, I found a somewhat old post where you try to solve a similar question, there are several paths to take and maybe one will work for you. how-to-disable-autocomplete-in-forms

NOTE: using the autocomplete="off"in inputwill not work if the form is also on

HTML autocomplete attribute

After researching the subject without finding a definitive solution to the problem, which is simple and at the same time respects the standard already created, I have decided to program a solution and share it since at some point any developer is going to run into this problem because at some point At this point you will have to create a LOGIN form .

This solution tries to maintain the standard already created and through javascriptmaking the WEB browsersautocomplete respect it, it is the HTML Attribute

Although the standard is very complete in this regard, the example that I leave here only supports the value autocomplete="off"at the level of the tag <form>e <input>.

You can also place a checkboxwith id="autocomplete"to force the autocomplete="on"global scope for all pages where you use this code, (the lines that control this feature are commented out in the code since S O does not allow them).

Without further ado, here is the working example of the code:

autocomplete = document.querySelectorAll("[autocomplete=off]");
if ( autocomplete.tagName = "FORM")
 autocomplete = autocomplete[0].querySelectorAll("input");
     
if ( autocomplete.length ) {
 var elm = document.getElementById("autocomplete") || {};
 if ( elm.name == "autocomplete" ) {
  elm.addEventListener( "change", setAutocomplete );
 // elm.checked = ( "true" === localStorage.getItem( 'autocomplete' ) );
 }
 setAutocomplete(elm);
}

function setAutocomplete(elm) {
 elm = elm.target  || elm;
// if ( elm.name == "autocomplete" )
//  localStorage.setItem('autocomplete', elm.defaultChecked = elm.checked);

 if ( ! elm.checked ) {
  autocomplete.forEach(function(elm) {
   elm.oldReadOnly = elm.readOnly;
   elm.readOnly = true;
   elm.value = elm.defaultValue;
  });
  setTimeout(function() {
   autocomplete.forEach(function(elm) {
    elm.readOnly = elm.oldReadOnly;
   });
  }, 1000);
 }
}

<form autocomplete="off">
 <h1>Inicio de sesión</h1>
 <br>
 Nombre de Usuario:
 <input type="text" name="login" id="login">
 <br>
 Clave de Acceso:
 <input type="password" name="password" id="password">
 <br>
 recordar contraseña
 <input type="checkbox" name="autocomplete" id="autocomplete" value="ON">
 <br>
 <input type="submit" value="Enviar">
</form>

One way to solve this problem would be to detect the change in this input, and execute a function where the field is given an empty value the first time it is executed. example:

//Función que se ejecuta al detectar un cambio en el input tipo password 
clearInputs(){
// enableClear en este caso es la bandera que me indicará si es el 
// primer cambio del input (Cuando el navegador lo autocompleta)

if(this.enableClear){
//cambiar el valor del input a ''
this.enableClear = false; 
// se deshabilita la bandera para que no se
// elimine el valor en los proximos cambios

}

autocompleteYou have used the input control attribute , https://www.w3schools.com/tags/att_input_autocomplete.asp

I leave the example of the link

<form action="/action_page.php" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>