html - values - Inhabilita la función de autocompletar en Chrome sin deshabilitar la función de autocompletar

input not remember values

Question

Esta pregunta ya tiene una respuesta aquí:

• Desactivar Chrome Autofill 79 respuestas

¿Cómo podemos deshabilitar la función de autocompletar de Chrome en ciertas <input> para evitar que se llenen automáticamente cuando se carga la página?

Al mismo tiempo, necesito mantener el autocompletar habilitado, para que el usuario pueda ver la lista de sugerencias haciendo clic en la entrada o escribiendo en ella. Se puede hacer esto?

EDITAR: siéntase libre de usar JavaScript o jQuery si cree que es necesario o si cree que simplificaría su solución.

Answer 1

Aquí está la magia que quieres:

 autocomplete="new-password"

Chrome ignora intencionalmente autocomplete="off" y autocomplete="false" . Sin embargo, introducen la new-password como una cláusula especial para evitar que se llenen automáticamente los nuevos formularios de contraseña.

Pongo la línea anterior en la entrada de mi contraseña, y ahora puedo editar otros campos en mi formulario y la contraseña no se completa automáticamente.

Answer 2

Autocompletar funciona con el atributo de nombre de la entrada, por lo que si establece un nombre para una entrada como "nombre", Chrome lo rellenará.

Si quiere deshabilitarlo, use un nombre extraño como "supermanombre".

Javascript no puede resolver su problema

Segunda solución: puede ocultar sus entradas con los mismos nombres, y establecer sus valores con otras entradas. Simplifiqué el J con jQuery.

<form action="handlerfile.php" method="post">
<input type="text" id="1" onclick="$("#2").val($("#1").val())"/>
<input type="hidden" name="username" id="2">
</form>

Answer 3

Después de mucha lucha, descubrí que la solución es mucho más simple de lo que podrías imaginar:

En lugar de autocomplete="off" simplemente use autocomplete="false" ;)

Prueba esto...

$(document).ready(function () {
$(''input'').attr(''autocomplete'', ''false'');
});

Answer 4

El administrador de contraseñas de Chrome está buscando elementos de entrada con type="password" y completa la contraseña guardada. También ignora autocomplete="off" propiedad autocomplete="off" .

Aquí está la solución para el último Chrome (versión 40.0.2181.0 canary) :

<input name="password">

JS:

setTimeout(function() {
var input = document.querySelector("input[name=password]");
input.setAttribute("type", "password");
}, 0)

Answer 5

Es mejor que lo deshabilite para sus entradas, a fin de evitar la finalización automática.

<input type="password" ... disabled />

Answer 6

Esta es la última solución que he descubierto. Esto evita que Google llene los campos y los resalte de amarillo antes de que haya tipeado algo. Básicamente, si pones "display: none" en el campo, Google es lo suficientemente inteligente como para ignorarlo y pasar al siguiente campo. Si pones "visibility: hidden" aunque lo cuenta como un campo en el formulario que parece interferir con sus cálculos. No se necesita javascript

<form method=''post''>
<input type=''text'' name=''u'' size=''16''/>
<input type=''password'' name=''fake'' size=''1'' style=''width:1px;visibility:hidden''/><br />
<input type=''password'' name=''p'' size=''16''/>
</form>

Answer 7

Esto podría ayudar: https://.com/a/4196465/683114

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
$(window).load(function(){
$(''input:-webkit-autofill'').each(function(){
var text = $(this).val();
var name = $(this).attr(''name'');
$(this).after(this.outerHTML).remove();
$(''input[name='' + name + '']'').val(text);
});
});
}

Parece que con carga, encuentra todas las entradas con autocompletar, agrega su outerHTML y elimina el original, conservando el valor y el nombre (se cambia fácilmente para preservar la ID, etc.)

Si esto conserva el texto de autocompletar, simplemente puede establecer

var text = ""; /* $(this).val(); */

Desde el formulario original donde se publicó este, se dice que preserva la autocompletar. :)

¡Buena suerte!

Answer 8

Hasta ahora, he encontrado que este está funcionando, teniendo que establecer un Tiempo de espera de 1 ms para que la acción se complete después del autocompletado de Chrome.

$(window).on(''load'', function() {
setTimeout(function(){
$(''input[name*=email],input[name*=Password]'').val(''-'').val(null);
},1);
});

Me pregunto si hay alguna forma de asociar esta función a la función de autocompletado cromada, o incluso, redeclarla

Answer 9

La solución más fácil, proporcione un valor de '''' para el campo de nombre de usuario (que todavía puede llamar ''nombre de usuario'').

Si el valor puede ser llenado por valores ingresados ​​por el usuario, como suele ser el caso para un formulario que está validando, proporcione un valor de '''' cuando aún no esté configurado. En PHP,

if(trim($username) == ''''){$username = '' '';}
<input type=''text'' value = ''$username'' name = ''Username'' />

De hecho, creo que el autocompletado para el nombre de usuario y la contraseña concede de manera efectiva el acceso de los obsequios a todas sus cuentas a cualquier persona que acceda a su computadora, independientemente de cuán oscuras sean sus contraseñas ...

Answer 10

Me encontré hoy con el raro comportamiento de autocompletar cromado. Pasó a habilitarse en los campos llamados: "inserción" y "postcontraseña" (rellenando su nombre de usuario y contraseña) sin razón aparente. Esos campos ya tenían el autocompletar desactivado.

Ninguno de los métodos descritos parecía funcionar. Ninguno de los métodos de la otra respuesta funcionó bien. Encontré mi propia idea basándome en la respuesta de Steele (en realidad podría haber funcionado, pero necesito el formato de datos fijos en mi aplicación):

Antes de la contraseña real, agrega esos dos campos ficticios:

<input type=''text'' style=''display: none''>
<input type=''password'' style=''display: none''>

Solo que este finalmente deshabilitó la función de autocompletar para mi formulario.

Es una pena que deshabilitar un comportamiento tan básico sea así de duro y travieso.

Answer 11

Mi solución se basa en la solución de usuario dsuess, que no funcionó en IE para mí, porque tuve que hacer clic una vez más en el cuadro de texto para poder escribir. Por lo tanto, lo adapté solo a Chrome:

$(window).on(''load'', function () {
if (navigator.userAgent.indexOf("Chrome") != -1) {
$(''#myTextBox'').attr(''readonly'', ''true'');
$(''#myTextBox'').addClass("forceWhiteBackground");
$(''#myTextBox'').focus(function () {
$(''#myTextBox'').removeAttr(''readonly'');
$(''#myTextBox'').removeClass(''forceWhiteBackground'');
});
}
});

En tu css agrega esto:

.forceWhiteBackground {
background-color:white !important;
}

Answer 12

No es una solución hermosa, pero funcionó en Chrome 56:

<INPUT TYPE="text" NAME="name" ID="name" VALUE=" ">
<INPUT TYPE="password" NAME="pass" ID="pass">

Tenga en cuenta un espacio en el valor. Y entonces:

$(document).ready(function(){
setTimeout("$(''#name'').val('''')",1000);
});

Answer 13

No me gusta usar setTimeout o incluso tener entradas temporales extrañas. Así que se me ocurrió esto.

Simplemente cambie su tipo de campo de contraseña a texto

<input name="password" type="text" value="">

Y cuando el usuario enfoca esa entrada, cámbiala de nuevo a la contraseña

$(''input[name=password]'').on(''focus'', function (e) {
$(e.target).attr(''type'', ''password'');
});

Está trabajando con la última versión de Chrome (versión 54.0.2840.71 (64 bits))

Answer 14

No puedo hacer que mi Chrome se autocompleta automáticamente al cargar la página para probar esto, pero puede intentar agregar autocomplete="off" a sus campos y luego eliminar el atributo en la carga:

$(window).load(function() { // can also try on document ready
$(''input[autocomplete]'').removeAttr(''autocomplete'');
});

Answer 15

Recientemente me enfrenté a este problema, y ​​sin una solución sencilla ya que mis campos se pueden rellenar previamente, quería compartir un truco elegante que se me ocurrió al establecer el tipo de contraseña en el evento listo.

No declare su campo de entrada como escriba la contraseña al crearlo, pero agregue un detector de eventos listo para agregarlo:

function createSecretTextInput(name,parent){
var createInput = document.createElement("input");
createInput.setAttribute(''name'', name);
createInput.setAttribute(''class'', ''secretText'');
createInput.setAttribute(''id'', name+''SecretText'');
createInput.setAttribute(''value'', ''test1234'');
if(parent==null)
document.body.appendChild(createInput);
else
document.getElementById(parent).appendChild(createInput);
$(function(){
document.getElementById(name+''SecretText'').setAttribute(''type'', ''password'');
});
};
createSecretTextInput(''name'', null);

http://jsfiddle.net/

Answer 16

Un poco tarde para la fiesta ... pero esto se hace fácilmente con jQuery:

$(window).on(''load'', function() {
$(''input:-webkit-autofill'').each(function() {
$(this).after($(this).clone(true).val('''')).remove();
});
});

Pros

• Elimina el texto de autocompletar y el color de fondo.
• Retiene autocompletar en el campo.
• Mantiene los eventos / datos vinculados al elemento de entrada.

Contras

• Destello rápido del campo autocompletado en la carga de la página.

Answer 17

Un poco tarde, pero esta es mi solución a prueba de tontos útil para páginas como la página de inscripción / registro donde el usuario tiene que ingresar una nueva contraseña.

<form method="post">
<input type="text" name="fname" id="firstname" x-autocompletetype="given-name" autocomplete="on">
<input type="text" name="lname" id="lastname" x-autocompletetype="family-name" autocomplete="on">
<input type="text" name="email" id="email" x-autocompletetype="email" autocomplete="on">
<input type="password" name="password" id="password_fake" class="hidden" autocomplete="off" style="display: none;">
<input type="password" name="password" id="password" autocomplete="off">
</form>

Chrome detectará dos entradas de contraseña y no rellenará automáticamente los campos de contraseña. Sin embargo, el campo id = "password_fake" se ocultará a través de CSS. Entonces, el usuario solo verá un campo de contraseña.

También agregué algunos atributos adicionales "x-autocompletetype", que es una función de autocompletar específica experimental de Chrome. De mi ejemplo, Chrome completará automáticamente el primer nombre, apellido y dirección de correo electrónico, y NO el campo de contraseña.

Answer 18

Una solución sería autocompletar las entradas con espacios en blanco, y tenerlos claros en el enfoque.

Ejemplo: http://nfdb.net/autofill.php

<!doctype html>
<html>
<head>
<title>Autofill Test</title>
<script>
var userfield;
// After the document has loaded, manipulate DOM elements.
window.addEventListener(''load'', function() {
// Get the username field element.
userfield = document.getElementById(''user'');
// Listen to the ''focus'' event on the input element.
userfield.addEventListener(''focus'', function() {
// Checks if the value is the EM space character,
// and removes it when the input is recieves focus.
if (this.value == ''/u2003'') this.value = ''''
}, false);
// Listen to the ''blur'' event on the input element.
// Triggered when the user focuses on another element or window.
userfield.addEventListener(''blur'', function() {
// Checks if the value is empty (the user hasn''t typed)
// and inserts the EM space character if necessary.
if (this.value == '''') this.value = ''/u2003'';
}, false);
}, false);
</script>
</head>
<body>
<form method="GET" action="">
<input id="user" name="username" type="text" value="&#8195;"/><br/>
<input name="password" type="password" value=""/><br/>
<input type="submit" value="Login">
</form>
</body>
</html>

Esto debería evitar que el navegador llene automáticamente los campos, pero aún así permitir que se completen automáticamente.

Aquí hay otro ejemplo que borra las entradas del formulario después de cargar la página. La ventaja de este método es que las entradas nunca tienen caracteres en blanco, la desventaja es que hay una pequeña posibilidad de que los valores de autocompletado puedan ser visibles durante unos pocos milisegundos.

http://nfdb.net/autofill2.php

<!doctype html>
<html>
<head>
<title>Autofill Test</title>
<script>
var userfield, passfield;
// Wait for the document to load, then call the clear function.
window.addEventListener(''load'', function() {
// Get the fields we want to clear.
userfield = document.getElementById(''user'');
passfield = document.getElementById(''pass'');
// Clear the fields.
userfield.value = '''';
passfield.value = '''';
// Clear the fields again after a very short period of time, in case the auto-complete is delayed.
setTimeout(function() { userfield.value = ''''; passfield.value = ''''; }, 50);
setTimeout(function() { userfield.value = ''''; passfield.value = ''''; }, 100);
}, false);
</script>
</head>
<body>
<div>This form has autofill disabled:</div>
<form name="login" method="GET" action="./autofill2.php">
<input id="user" name="username" type="text" value=""/><br/>
<input id="pass" name="password" type="password" value=""/><br/>
<input type="submit" value="Login">
</form>
<div>This form is untouched:</div>
<form name="login" method="GET" action="./autofill2.php">
<input name="username" type="text" value=""/><br/>
<input name="password" type="password" value=""/><br/>
<input type="submit" value="Login">
</form>
</body>
</html>

Answer 19

autocomplete="off" en la entrada que ahora funciona en Chrome V44 (y Canary V47)

Answer 20

Solución: evitar que el navegador se autocompleta

 <input type="password" readonly onfocus="this.removeAttribute(''readonly'');"/>

Actualización: Mobile Safari establece el cursor en el campo, pero no muestra el teclado virtual. El nuevo Fix funciona como antes pero maneja el teclado virtual:

<input id="email" readonly type="email" onfocus="if (this.hasAttribute(''readonly'')) {
this.removeAttribute(''readonly'');
// fix for mobile safari to show virtual keyboard
this.blur(); this.focus(); }" />

Demostración en vivo https://jsfiddle.net/danielsuess/n0scguv6/

// UpdateEnd

Explicación En lugar de rellenar espacios en blanco o funciones de ventana en carga, este fragmento funciona configurando el modo de solo lectura y cambiando a escriturable si el usuario enfoca este campo de entrada (el enfoque contiene un clic del mouse y una tabulación en los campos).

No se necesita jQuery, JavaScript puro.

Answer 21

var fields = $(''form input[value=""]'');
fields.val('' '');
setTimeout(function() {
fields.val('''');
}, 500);