html - guia - qgis manual

Anule el relleno de formulario del navegador y resalte las entradas con HTML/CSS

Question

Tengo 2 formularios básicos: inicie sesión y regístrese, ambos en la misma página. Ahora, no tengo ningún problema con el inicio de sesión del formulario de autocompletado, pero el formulario de registro también se llena automáticamente, y no me gusta.

Además, los estilos de formulario obtienen un fondo amarillo que no puedo anular y no quiero usar CSS en línea para hacerlo. ¿Qué puedo hacer para que dejen de ser de color amarillo y (posiblemente) auto llenado ? ¡Gracias por adelantado!

Answer 1

¿Por qué no simplemente poner esto en su CSS?

input --webkit-autocomplete {
color: inherit;
background: inherit;
border: inherit;
}

Eso debería encargarse de tu problema. Aunque plantea un problema de usabilidad porque ahora el usuario no puede ver que el formulario se rellenó automáticamente en la forma en que está acostumbrado.

[edit] Después de publicar esto, vi que ya se dio una respuesta similar y que usted comentó que no funcionó. No veo por qué porque funcionó cuando lo probé.

Answer 2

A veces, la autocompleta en el navegador todavía se autocompleta cuando solo tienes el código en el elemento <form> .

Intenté ponerlo en el elemento <input> también y funcionó mejor.

<form autocomplete="off"> AND <input autocomplete="off">

Sin embargo, el soporte para este atributo está por terminar, lea https://bugzilla.mozilla.org/show_bug.cgi?id=956906#c1

https://bugzilla.mozilla.org/show_bug.cgi?id=956906

Otro trabajo que encontré es eliminar marcadores de posición dentro de los campos de entrada que sugieren que es un campo de correo electrónico, nombre de usuario o teléfono (es decir, "Su correo electrónico", "Correo electrónico", etc.)

Esto hace que los navegadores no sepan qué tipo de campo es, por lo tanto, no intenta autocompletarlo.

Answer 3

Agregue esta regla de CSS, y el color de fondo amarillo desaparece. :)

input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}

Answer 4

Autocompletar apagado no es compatible con los navegadores modernos. La forma más fácil de resolver autocompletar que encontré fue una pequeña pista con HTML y JS. Lo primero que debe hacer es cambiar el tipo de entrada en HTML de ''contraseña'' a ''texto''.

<input class="input input-xxl input-watery" type="text" name="password"/>

Autocompletar se inicia después de que se cargue la ventana. Está bien. Pero cuando el tipo de su campo no es ''contraseña'', el navegador no sabía qué campos debe completar. Por lo tanto, no habrá autocompletar en los campos del formulario.

Después de eso, vincula el evento focusin al campo de contraseña, por ej. en Backbone:

''focusin input[name=password]'': ''onInputPasswordFocusIn'',

En onInputPasswordFocusIn , simplemente cambie el tipo de campo a la contraseña, con una simple comprobación:

if (e.currentTarget.value === '''') {
$(e.currentTarget).attr(''type'', ''password'');
}

Eso es todo!

UPD: esto no funciona con JavaSciprt deshabilitado

UPD en 2018. También encontró algún truco divertido. Establezca el atributo de solo lectura en el campo de entrada, y elimínelo en el evento de enfoque. Primero, evite que el navegador autocomplete los campos, el segundo permitirá ingresar datos.

Answer 5

Como el navegador busca campos de tipo de contraseña, otra solución consiste en incluir un campo oculto al principio de su formulario:

<!-- unused field to stop browsers from overriding form style -->
<input type=''password'' style = ''display:none'' />

Answer 6

Después de 2 horas de búsqueda, parece que Google Chrome sigue anulando el color amarillo de alguna manera, pero encontré la solución. Funcionará para flotar, enfocar, etc. también. Todo lo que tiene que hacer es agregarle !important .

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

esto eliminará completamente el color amarillo de los campos de entrada

Answer 7

Después de probar muchas cosas, encontré soluciones de trabajo que activaron los campos autocompletados y los reemplacé por duplicados. Para no perder eventos adjuntos, se me ocurrió otra solución (un poco larga).

En cada evento de "entrada", rápidamente adjunta eventos de "cambio" a todas las entradas involucradas. Prueba si se han autocompletado. En caso afirmativo, envíe un nuevo evento de texto que engañará al navegador para que piense que el valor ha sido cambiado por el usuario, lo que permite eliminar el fondo amarillo.

var initialFocusedElement = null
, $inputs = $(''input[type="text"]'');
var removeAutofillStyle = function() {
if($(this).is('':-webkit-autofill'')) {
var val = this.value;
// Remove change event, we won''t need it until next "input" event.
$(this).off(''change'');
// Dispatch a text event on the input field to trick the browser
this.focus();
event = document.createEvent(''TextEvent'');
event.initTextEvent(''textInput'', true, true, window, ''*'');
this.dispatchEvent(event);
// Now the value has an asterisk appended, so restore it to the original
this.value = val;
// Always turn focus back to the element that received
// input that caused autofill
initialFocusedElement.focus();
}
};
var onChange = function() {
// Testing if element has been autofilled doesn''t
// work directly on change event.
var self = this;
setTimeout(function() {
removeAutofillStyle.call(self);
}, 1);
};
$inputs.on(''input'', function() {
if(this === document.activeElement) {
initialFocusedElement = this;
// Autofilling will cause "change" event to be
// fired, so look for it
$inputs.on(''change'', onChange);
}
});

Answer 8

El elemento de form tiene un atributo de autocomplete que puede off . A partir de la CSS, la directiva !important después de una propiedad evita que sea desautorizada:

background-color: white !important;

Solo IE6 no lo comprende.

Si no te entendí bien, también hay una outline propiedad que podrías encontrar útil.

Answer 9

El problema REAL aquí es que Webkit (Safari, Chrome, ...) tiene un error. Cuando hay más de un [formulario] en la página, cada uno con un [input type = "text" name = "foo" ...] (es decir, con el mismo valor para el atributo ''nombre''), entonces cuando el usuario regresa a la página que se autocompletará se hará en el campo de entrada del PRIMER [formulario] en la página, no en el [formulario] que se envió. La segunda vez, el SIGUIENTE [formulario] se autocompletará, y así sucesivamente. Solo [forma] con un campo de texto de entrada con el MISMO nombre se verá afectado.

Esto se debe informar a los desarrolladores de Webkit.

Opera autocompleta el derecho [formulario].

Firefox e IE no se completan automáticamente.

Entonces, vuelvo a decir: este es un error en Webkit.

Answer 10

Engañarlo con una sombra interior "fuerte":

input:-webkit-autofill {
-webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
-webkit-text-fill-color: #333;
}
input:-webkit-autofill:focus {
-webkit-box-shadow: /*your box-shadow*/,0 0 0 50px white inset;
-webkit-text-fill-color: #333;
}

Answer 11

Esto soluciona el problema tanto en Safari como en Chrome

if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
window.setInterval(function(){
$(''input:-webkit-autofill'').each(function(){
var clone = $(this).clone(true, true);
$(this).after(clone).remove();
});
}, 20);
}

Answer 12

He leído tantos hilos y probado tantos fragmentos de código. Después de recopilar todas esas cosas, la única forma en que descubrí que limpiaba limpiamente los campos de inicio de sesión y contraseña y restablecía el fondo en blanco era la siguiente:

$(window).load(function() {
setTimeout(function() {
$(''input:-webkit-autofill'')
.val('''')
.css(''-webkit-box-shadow'', ''0 0 0px 1000px white inset'')
.attr(''readonly'', true)
.removeAttr(''readonly'')
;
}, 50);
});

No dude en comentar, estoy abierto a todas las mejoras si encuentra algunas.

Answer 13

He visto la función de autocompletar de la barra de herramientas de Google deshabilitada con javascript. Podría funcionar con algunas otras herramientas de autocompletar; No sé si ayudará con los navegadores integrados en autocompletar.

<script type="text/javascript"><!--
if(window.attachEvent)
window.attachEvent("onload",setListeners);
function setListeners(){
inputList = document.getElementsByTagName("INPUT");
for(i=0;i<inputList.length;i++){
inputList[i].attachEvent("onpropertychange",restoreStyles);
inputList[i].style.backgroundColor = "";
}
selectList = document.getElementsByTagName("SELECT");
for(i=0;i<selectList.length;i++){
selectList[i].attachEvent("onpropertychange",restoreStyles);
selectList[i].style.backgroundColor = "";
}
}
function restoreStyles(){
if(event.srcElement.style.backgroundColor != "")
event.srcElement.style.backgroundColor = "";
}//-->
</script>

Answer 14

La captura de pantalla a la que vinculó dice que WebKit está usando la input:-webkit-autofill del selector input:-webkit-autofill para esos elementos. ¿Has intentado poner esto en tu CSS?

input:-webkit-autofill {
background-color: white !important;
}

Si eso no funciona, entonces probablemente nada lo hará. Esos campos están resaltados para alertar al usuario de que se han cargado automáticamente con información privada (como la dirección de inicio del usuario) y podría argumentarse que permite ocultar una página que está permitiendo un riesgo de seguridad.

Answer 15

Puede desactivar la finalización automática a partir de HTML5 (a través de autocomplete="off" ), pero NO PUEDE anular el resaltado del navegador. Podría tratar de jugar con ::selection en CSS (la mayoría de los navegadores requieren un prefijo de proveedor para que funcione), pero probablemente tampoco lo ayude.

A menos que el proveedor del navegador haya implementado específicamente una forma específica de proveedor de sobreescribirlo, no puede hacer nada con respecto a los estilos que ya están destinados a anular la hoja de estilo del sitio para el usuario. ¡Estos se suelen aplicar después de aplicar sus hojas de estilo e ignorar ! important invalidaciones ! important , también.

Answer 16

Si está en el campo de entrada, estás tratando de "no amarillear" ...

1. Establezca un color de fondo con css ... digamos #ccc (gris claro).
2. Agregar valor = "sometext", que temporalmente llena el campo con "sometext"
3. (opcional) Agregue un poco de javascript para borrar el "algún texto" cuando ingrese el texto real.

Por lo tanto, podría verse así:

<input id="login" style="background-color: #ccc;" value="username"
onblur="if(this.value=='''') this.value=''username'';"
onfocus="if(this.value==''username'') this.value='''';" />

Answer 17

Solución simple de JavaScript para todos los navegadores:

setTimeout(function() {
$(".parent input").each(function(){
parent = $(this).parents(".parent");
$(this).clone().appendTo(parent);
$(this).attr("id","").attr("name","").hide();
});
}, 300 );

Clone la entrada, reinicie el atributo y oculte la entrada original. Tiempo de espera es necesario para iPad

Answer 18

También puede cambiar el atributo de nombre de los elementos de su formulario para que sea algo generado para que el navegador no lo rastree. SIN EMBARGO, parece que Firefox 2.x + y Google Chrome no tienen muchos problemas si la URL de solicitud es idéntica. Intenta básicamente agregar un parámetro de solicitud de sal y un nombre de campo de sal para el formulario de registro.

Sin embargo, creo que autocomplete = "off" sigue siendo la mejor solución :)

Answer 19

para el autocompletado, puedes usar:

<form autocomplete="off">

con respecto al problema de coloración:

de su captura de pantalla puedo ver que el webkit genera el siguiente estilo:

input:-webkit-autofill {
background-color: #FAFFBD !important;
}

1) como # id-styles son aún más importantes que los estilos .class, lo siguiente puede funcionar:

#inputId:-webkit-autofill {
background-color: white !important;
}

2) si eso no funciona, puede intentar establecer el estilo a través de JavaScript mediante programación

$("input[type=''text'']").bind(''focus'', function() {
$(this).css(''background-color'', ''white'');
});

3) si eso no funciona, estás condenado :-) considera esto: esto no ocultará el color amarillo, pero hará que el texto sea legible de nuevo.

input:-webkit-autofill {
color: #2a2a2a !important;
}

4) una solución css / javascript:

css:

input:focus {
background-position: 0 0;
}

y el siguiente javascript tiene que ejecutarse onload:

function loadPage()
{
if (document.login)//if the form login exists, focus:
{
document.login.name.focus();//the username input
document.login.pass.focus();//the password input
document.login.login.focus();//the login button (submitbutton)
}
}

p.ej:

<body onload="loadPage();">

buena suerte :-)

5) Si ninguno de los trabajos anteriores intenta eliminar los elementos de entrada, clonándolos, y luego colocando los elementos clonados nuevamente en la página (funciona en Safari 6.0.3):

<script>
function loadPage(){
var e = document.getElementById(''id_email'');
var ep = e.parentNode;
ep.removeChild(e);
var e2 = e.cloneNode();
ep.appendChild(e2);
var p = document.getElementById(''id_password'');
var pp = p.parentNode;
pp.removeChild(p);
var p2 = p.cloneNode();
pp.appendChild(p2);
}
document.body.onload = loadPage;
</script>

6) De here :

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);
});
});
}

Answer 20

<form autocomplete="off">

Prácticamente todos los navegadores modernos lo respetarán.