Как отключить автозаполнение форм с помощью html 5?

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

<div class="field">
	<input type="password" name="pass" autocomplete="new-password">
	<div class="hidden"></div>
</div>

здесь мы отключаем автозаполнение пароля, а также чтобы не было выпадающего списка выбором паролей там где это не нужно:
- оборачиваем форму в блок со свойством position:relative
- после поля прописываем блок с position:absolute top:0 left:0 width:100% height:100%
- создаем событие onclick, для класса field где вызываем фокус для нашего поля внутри

разница на скриншотах

До


После

<form>
    <input type="text" autocomplete="off" name="test" >
</form>

jsfiddle.net/Symphony/jfc9spu6

Можно отключить автозаполнение, если в момент фокусировки в поле поменять у поля значение name на произвольное. А когда пользователь выходит из input, то поменять значение name обратно. В этом случае браузер Хром не выводит подсказок, т.к. каждый раз значение name новое.
Необходимо подключать jquery, а ниже подключить сам скрипт.

Исходник (взял отсюда только код, который генерит значение name) https://github.com/terrylinooo/jquery.disableAutoFill

Что получилось в итоге:

Это сама форма, показываю кусок формы, с полями ввода, для которых отключаю подсказки хрома. Оба инпута имеют класс "only-ru":

<form ..>
<input class="form-control city1 only-ru" type="text" name="city1" id="city1" placeholder="откуда" value="" autocomplete="off" >
<input class="form-control city2 only-ru" type="text" name="city2" id="city2" placeholder="куда" value="" autocomplete="off" >
...
</form>

Сам скрипт, который при фокусе генерит произвольное значение для name, а при выходе из фокуса - возвращает значение name обратно, как мне нужно. Можете его улучить, сделать более универсальным:

//поменять name при фокусе
$('.only-ru').on("focus", function(){
	var realFields = [];
    var realFieldsMapper = {};
	$(this).each(function(i) {
		realFields[i] = $(this).attr('name');
		if(realFieldsMapper[realFields[i]]) {
			$(this).attr('name', realFieldsMapper[realFields[i]]);
		} else {
			var randomName = Math.random().toString(36).replace(/[^a-z]+/g, '');
			$(this).attr('name', randomName);
			realFieldsMapper[realFields[i]] = randomName;
		}
	});
});
//поменять name обратно
$(document).mouseup(function (e){ 
	var div1 = $("#city1"), div2 = $("#city2");	
	if (!div1.is(e.target)) $("input#city1").attr('name', 'city1');
	if (!div2.is(e.target)) $("input#city2").attr('name', 'city2');
});

Придумал вариант которого вроде нигде нет, но он банально простой, пришел мне в голову изучая методы, перечисленные выше

<input onfocus="this.setAttribute('type', 'password');" type="text">

https://developer.mozilla.org/en-US/docs/Web/Secur...

Это в браузере отключать надо. Автозаполнение и автодополнение - разные вещи.
(для хрома - chrome://settings/ -> Показать дополнительные настройки -> Пароли и формы)

Отключение автозаполнения в современных браузерах не работает, только в настройках браузера отключать.
источник

На "стаке" проблему решили
https://translated.turbopages.org/proxy_u/en-ru.ru...
Johnny Umberger предложил вариант, где сначала грузим страницу с полем пароля, но как текстовое, а после загрузки скриптом ставим все на место. В яндекс браузере сработало, менеджер паролей замолчал.