html - remove - input type password no autocomplete
La función Autocompletar de Chrome cubre Autocompletar para Google Maps API v3 (10)
Estoy utilizando Google Maps Javascript v3 para configurar el autocompletado en un campo de entrada HTML, como por ejemplo:
http://imgur.com/Rm6X2FI.png - (sin autocompletar)
El problema que tengo es que la Autocompletar de Chrome cubre el Autocompletado de Mapas de esta manera:
http://imgur.com/7a2QM7L.png - (w / autofill)
Encontré una solución en línea hace un par de meses (ref: Deshabilitando la función Autocompletar de Chrome ), pero parece que esta solución ya no tiene ningún efecto.
<input type="text" name="address" id="address_fake" autocomplete="off" style="display:none">
<input type="text" name="address" id="address" autocomplete="off" placeholder="Address" />
¿Hay alguna manera de evitar que la Autocompletar de Chrome aparezca en la parte superior de la lista de Autocompletar de Google Maps?
EDITAR: Detener el llenado automático de Google Chrome la entrada no proporciona una solución a mi problema actual. El problema está en el desplegable de relleno automático de Chrome en el campo de entrada, no en el campo de entrada que se llena automáticamente con un valor de relleno automático.
Esto me estaba volviendo totalmente loco también. Tienen el mismo problema. Usamos secuencias de comandos para extraer los valores de campo para que un usuario seleccione y NO queremos que el explorador automático haga lo que esté en mal estado. Chrome parece ser el bugger (última versión 42.0.2311.135 m), Firefox (FF) con el que podemos trabajar.
Por lo tanto, tenemos que lidiar con el autocomplete del navegador Y con el autofill de Chrome también. Si agrego: <form autocomplete = "off"> en la parte superior, se detiene el autocompletado en FF y Chrome, pero no el AUTOFILL en Chrome. Cambiar ''off'' a ''false'' no hace nada para ninguno de los navegadores. Resolvió el problema de FF pero no Chrome, ya que muestra el cuadro de AUTOFILL feo sobre el contenido.
Si agrega autocomplete = "off" a cada uno de los campos de manera individual, nuevamente, funciona en FF, pero para los campos de entrada que tienen este atributo autocompletado en Chrome está desactivado, pero la función de autocompletar aún sobresale.
Ahora, lo extraño es que si cambia el valor en el campo de entrada individual de "apagado" a "falso", entonces parece sacudir a Chrome y para el campo que tiene este conjunto en autocompletar = "falso", entonces SOLO verá los valores de autocompletado (si se ingresó algo en el campo antes) y todos los demás campos de entrada no muestran nada. También puede establecer este valor en no o xx o lo que sea y parece que Chrome barfs en el valor no válido para autocompletar y la forma reacciona de forma extraña. Si tiene 5 campos y configura esto para el tercer campo, los campos 1, 2, 4 y 5 están en blanco, pero el campo 3 muestra autocompletado.
Este es un ejemplo para copiar y meterse (intente mover el atributo autocompletar a diferentes campos y vea cómo reacciona):
<!DOCTYPE html>
<html>
<head>
<title>Signup</title>
</head>
<body>
<form autocomplete="off" method="post">
First name:
<input name="Firstname" type="text">
<br />Last name:
<input name="Lastname" type="text" style="width: 124px">
<br />Address:
<input autocomplete="false" name="Address" type="text" style="width: 383px">
<br />Phone number:
<input name="Phone" type="text">
<br />E-mail:
<input name="Email" type="text" style="width: 151px">
<br />
<input type="submit">
</form>
</body>
</html>
Mi solución para desactivar tanto el autocompletar como el autocompletado de Chrome (debería poder colocar el campo de entrada oculto en la parte superior o inferior debajo del envío). Agregue este <input autocomplete = "false" name = "hidden" type = "text" style = "display: none;"> al código:
<!DOCTYPE html>
<html>
<head>
<title>Signup</title>
</head>
<body>
<form autocomplete="off" method="post">
<input autocomplete="false" name="hidden" type="text" style="display:none;">
<br />First name:
<input name="Firstname" type="text">
<br />Last name:
<input name="Lastname" type="text" style="width: 124px">
<br />Address:
<input name="Address" type="text" style="width: 383px">
<br />Phone number:
<input name="Phone" type="text">
<br />E-mail:
<input name="Email" type="text" style="width: 151px">
<br />
<input type="submit">
</form>
</body>
</html>
En pocas palabras: Chrome se adhiere al autocompletado = desactivado pero el autocompletado de Chrome es el problema. Espero que esto ayude.
Logré arreglar este problema para Chrome 69 cambiando el marcador de posición de la entrada.
Tuve 2 entradas vinculadas a Google Places Autocompletar. Tan pronto como hiciste clic en el campo, el autocompletar apareció cubriendo las sugerencias de Autocompletar. También tuve una configuración de escucha para cambiar el atributo ''autocompletar'' de la entrada a algo aleatorio, como ''no-google-autofill''. Eso funcionó bien hasta que actualicé a Chrome 69.
Finalmente, lo arreglé cambiando el marcador de posición de la entrada de ''Código postal'' a ''Área''. Aparentemente, el autocompletado se activó debido al marcador de posición. Chrome de Sometime intenta ser demasiado inteligente para su propio bien.
Ninguna de las respuestas anteriores funcionó para mí (Chrome 64.0.3282.186, ventanas x64).
TL; DR: el código de Google Maps está off atributo autocomplete , por lo que incluso si lo configura con una new-password , seguirá obteniendo la función de autocompletar. El truco que estoy usando es escuchar las mutaciones en ese atributo y luego anularlo. Nota: simplemente cambiar el atributo después de llamar a Google Maps no funciona.
Configure un MutationObserver antes de inicializar el autocompletado de Google Maps que inmediatamente deja de escuchar las mutaciones y luego establece el atributo en new-password .
var autocompleteInput = document.getElementById("id-of-element");
var observerHack = new MutationObserver(function() {
observerHack.disconnect();
$("#id-of-element").attr("autocomplete", "new-password");
});
observerHack.observe(autocompleteInput, {
attributes: true,
attributeFilter: [''autocomplete'']
});
Para aquellos que usan Angularjs, creé una directiva basada en la respuesta de @Rimmel que está funcionando para mí en Chrome 66.0.3359.139. A continuación se muestra el código:
(function(){
''use strict'';
angular.module(''app.directive'')
.directive(''stopAutofill'', stopAutofillDirective);
function stopAutofillDirective() {
return {
restrict: ''A'',
link: function (scope, element) {
var observerHack = new MutationObserver(function () {
observerHack.disconnect();
element.attr("autocomplete", "new-password");
});
observerHack.observe(element[0], {
attributes: true,
attributeFilter: [''autocomplete'']
});
}
};
};
})();
Para mí, inserté una cadena en el tiempo de ejecución en medio de la identificación del cuadro de entrada y el nombre del campo de formulario que fue reemplazado con la identificación de la sesión actual de los usuarios. El ID de sesión es lo más cercano que cualquiera puede llegar a ser único para cada usuario y sesión.
En resumen, lo que anteriormente era un campo llamado "cust_address" se convirtió en "cust_a734ohljehgto87y34hpwy9pho3ghseddress" al igual que el ID del campo El código del cuadro de texto de entrada se veía así:
''<input type=text name="cust_a%sessionid%ddress" id="cust_a%sessionid%ddress" value="" autocomplete="new-password">''
Para precauciones adicionales, agregué autocomplete = "nueva-contraseña", que parece funcionar en otros campos, pero no en la dirección, aunque en ocasiones sí funciona y no he averiguado qué hace que falle o funcione (aún) ...
Cuando mi usuario solicita el formulario, lo cargo en una variable en PHP y sustituyo todas las instancias de% sessionid% con el ID de sesión de la sesión del usuario actual y luego lo envío al navegador.
Hasta ahora, esto ha funcionado a la perfección, pero mi sistema todavía está en prueba beta, por lo que Chrome no ha monitoreado miles de entradas para que Chrome descubra la lógica y la evite. Es de esperar que no dediquen demasiado tiempo a evadir estas correcciones, especialmente teniendo en cuenta que es el SISTEMA PROPIO de lo que está superando al SISTEMA PROPIO de lo que se denomina autocompletar, rellenando automáticamente la API de los lugares del calendario.
Probé la muestra del buscador de direcciones de Google y tuve el mismo problema:
Respuesta actualizada
Con la nueva versión de Chrome , todo lo que necesita es agregar: autocomplete="off" a su entrada:
<input id="autocomplete" autocomplete="off" placeholder="Enter your address" onFocus="geolocate()" type="text"/>
Respuesta original - Solución alternativa
Esta es la entrada automcomplete, que tiene el evento: onFocus="geolocate()" :
<input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text"/>
Agregué esta línea para geolocalizar, para ocultar el autocompletado:
function geolocate() {
// add this line to hide the autocomplete
$("#autocomplete").attr("autocomplete", "new-password");
// other stuff
}
Solución:
$(''#Name'').on(''mouseup keyup'', function () {
var val = $(''#Name'').val();
val = val.length;
if (val === 0) {
$(''#Name'').attr(''autocomplete'', ''on'');
}
else {
$(''#Name'').attr(''autocomplete'', ''new-password'');
}
}).on(''mousedown keydown'', function () {
var val = $(''#Name'').val();
var length = val.length;
if (!length) {
$(''#Name'').attr(''autocomplete'', ''new-password'');
}
})
Use autocomplete = "new-password" para el campo de entrada para el que desea que se desactive el llenado automático. Google Chrome ignora intencionalmente autocomplete = "off | false", pero si lo configura como "nueva contraseña", entonces ignora el autocompletado.
También verifique la forma en que la API de Google Places maneja el llenado automático, idealmente este debería ser el enfoque para implementar: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform
intente agregar esto a su archivo css:
.pac-container{
display:none!important;
}
solución jQuery:
$(''#address'').focus(function() {
$(this).attr(''autocomplete'', ''new-password'');
});