Как запретить браузеру автозаполнение и автозаполнение полей формы?

Резюме одной строки :autocomplete="new-password"

Вы используете поле типа password. Независимо от того, есть ли у вас свойство autocomplete="off", браузеры спросят пользователя, хотят ли они сохранить пароль. И в случае, если пользователь примет, браузер попытается выполнить его автозаполнение.

Эта функция была разработана, начиная с Firefox 38 , Chrome 34 и IE 11 , в качестве меры безопасности.

Так как считается, что благодаря этому пользователи теперь могут поставить смехотворно сложный пароль (или нет) и никогда его не запомнить, надеясь, что браузер будет автоматически дополнять их пароли.

Во всяком случае, было сочтено, что для отключения такого поведения (автозаполнение даже после сохранения пароля позже ) можно использовать свойство autocomplete="new-password".

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

Однако autocomplete="new-password"в целом это не реализуется. Но в любом случае, если браузер не понимает присвоенное значение, он не будет слишком стараться. Следовательно; autocomplete="cualquier-cosa"также должно работать на вас.

Это может быть не то, что вы ожидаете, но единственный способ добиться этого — эмулировать ввод с помощью divсвойства a и contenteditable.

Теперь angular не распознает div как элементы, как это происходит с a <input type="text" />, обновляя ngModelкаждую введенную букву, поэтому мне пришлось создать директиву, чтобы она обновляла модель всякий раз, когда пользователь вводит div.

Прошу прощения, что пример в angularjs 1.*, так как я не знаю angular2 , но у вас будет представление, как это сделать:

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>

По сути, что он делает, так это то, что для каждого нажатия на div обновляется модель, назначенная div.

Теперь formне распознает атрибут nameв div, чтобы отправить его на сервер. Для этого вам просто нужно создать вход [скрытый] и присвоить ему значение модели, как в примере. Я оставлю это просто как пример, если это необходимо.

Браузеры еще не договорились о том, что использовать, и вы можете видеть проблемы, которые это вызывает у нас. В моем случае у меня сработал атрибут autocomplete="off" поставив его в форму в chrome v60.0.3112.90 и Edge v40.15063.0.0, но возможно не у всех есть обновленный браузер и не все используют chrome или edge .

Это не самое элегантное решение, но оно отлично работает. Так что никаких отрицательных моментов.

То, что вы пытаетесь сделать, отключить автозаполнение, противоречит предпосылкам, продвигаемым такими компаниями, как Google, в которых указанная прерогатива принадлежит пользователю.

Если вы настаиваете на своем намерении, первым делом попробуйте то, что рекомендует Mozilla Developer Network.

1. использовать autocomplete="off"илиautocomplete="nope"

Вышеупомянутое может не работать в таких браузерах, как Chrome, потому что, как упоминалось ранее для Google, прерогатива автозаполнения принадлежит пользователю, а не разработчику. В этом случае помните, что автозаполнение полагается на подсказки, чтобы иметь возможность сопоставлять данные, хранящиеся в браузере, с данными формы, такими как

• метка labelполей
• атрибуты, такие как nameиid

По возможности используйте уникальные метки и имена.

Вместо пароля или пароля попробуйте "пароль". Вместо электронной почты попробуйте с идентификатором

Еще одна вещь, которую можно попробовать, — продублировать поля, скрыв первые из них, поскольку обычно автозаполняется только первое вхождение.

С другой стороны, помимо функции автозаполнения форм современные браузеры имеют самостоятельную функцию сохранения логинов и паролей, что еще больше усложняет задачу разработчика по предотвращению автоматического заполнения этих данных.

О коде в stacksnippet

В ОП упоминается, что autocomplete="off"он не работает, но он не включен в код, а вместо этого включен атрибут appnoautocomplete="".

использованная литература

• Как отключить автозаполнение формы
• «AutoComplete=Off» не работает в браузере Google Chrome [дубликат]
• Браузер Chrome игнорирует автозаполнение = выключено
• Отключить функцию браузера «Сохранить пароль»

Что ж, кажется, что autocompleteв прошлом он часто использовался в таких версиях, как IE11, Chrome 34 и Firefox 30 , поэтому использовать его вообще невозможно. Тем не менее, я нашел несколько старый пост, в котором вы пытаетесь решить аналогичный вопрос, есть несколько путей, и, возможно, один из них сработает для вас. как отключить автозаполнение в формах

ПРИМЕЧАНИЕ: использование autocomplete="off"in inputне будет работать, если форма также включена .

Атрибут автозаполнения HTML

Изучив тему, не найдя окончательного решения проблемы, которое является простым и в то же время соответствует уже созданному стандарту, я решил запрограммировать решение и поделиться им, поскольку в какой-то момент любой разработчик столкнется с этой проблемой. потому что в какой-то момент вам придется создать форму ВХОДА .

Это решение пытается поддерживать уже созданный стандарт, и javascript, заставляя веб-браузерыautocomplete уважать его, это атрибут HTML .

Хотя стандарт в этом отношении очень полный, пример, который я оставляю здесь, поддерживает только значение autocomplete="off"на уровне тега <form>e <input>.

Вы также можете поместить checkboxwith id="autocomplete", чтобы принудительно установить autocomplete="on"глобальную область действия для всех страниц, на которых вы используете этот код (строки, управляющие этой функцией, закомментированы в коде, поскольку S O не разрешает их).

Без лишних слов, вот рабочий пример кода:

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>

Одним из способов решения этой проблемы было бы обнаружить изменение этого ввода и выполнить функцию, в которой поле получает пустое значение при первом выполнении. пример:

//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

}

Вы использовали атрибут autocompleteуправления вводом , https://www.w3schools.com/tags/att_input_autocomplete.asp

оставляю пример ссылки

<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>