Anule el llenado de formularios del navegador y el resaltado de entrada con HTML / CSS

139

Tengo 2 formularios básicos: iniciar sesión y suscribirse, ambos en la misma página. Ahora, no tengo ningún problema con el formulario de inicio de sesión de llenado automático,~~pero el formulario de registro también se completa automáticamente, y no me gusta.~~

Además, los estilos de formulario tienen 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) llenado automático~~? ¡Gracias por adelantado!

— Casraf
fuente

44

Realmente estás haciendo dos preguntas aquí: ¿Cómo deshabilitar el llenado automático de formularios? -AND- ¿Cómo anular el fondo amarillo cuando el formulario de autocompletar está habilitado? Esto no estaba claro hasta que leí todos los comentarios en las respuestas a continuación. Es posible que desee considerar editar su pregunta (especialmente porque ha ido tan lejos como para ofrecer una recompensa).

— benzado

Tienes razón, editado. O una versión perezosa de todos modos.

— Casraf

1

Como usuario del formulario, odiaría que mi usabilidad se vea afectada debido a sus preferencias visuales al forzar el autocompletado y resaltarlo. Deje que el usuario apague esto, no usted. Deja en paz mi experiencia de navegación.

— Byran Zaugg

Esa es la cuestión, solo desactivé el autocompletado en el formulario REGISTRO, que básicamente no debería tener un autocompletado regular, la información de finalización solo se crea una vez que se ha registrado. En cuanto al formulario de inicio de sesión, quiero mantener el autocompletado, pero simplemente deshabilito el color tonto que pone en los campos de entrada porque el texto en el interior se vuelve ilegible: el fondo es amarillo y el color del texto es blanco (el fondo original es gris oscuro) .

— Casraf

1

posible duplicado del autocompletado de formularios

— zzzzBov

163

para el autocompletado, puede usar:

<form autocomplete="off">

con respecto al problema de coloración:

De su captura de pantalla puedo ver que 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 configurar 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 nuevamente.

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

4) una solución css / javascript:

css:

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

y el siguiente javascript debe ejecutarse al cargar:

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, clonarlos y luego volver a colocar los elementos clonados 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) Desde aquí :

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

— Phil Rykoff
fuente

(1) no funciona. Intentaré (2) cuando vuelva a casa; espero que JS pueda anular esto; gracias :)

— casraf

1

(4) definitivamente elimina el amarillo: borde de enfoque.

— ruruskyi

Si el último bit no funciona para usted y sabe cómo funciona javascript (obtuvo el ID correcto, etc.) Podría tener el problema que tuve, estoy usando jquery mobile por algunas razones y esto se inicia más tarde y reemplaza las entradas parece. Entonces, lo que hice fue establecer un intervalo que lo clona cada 50 ms (funcionó después de 400 ms usando setTimeout pero no quiero arriesgarme a conexiones lentas). Y después de un segundo se elimina el intervalo:code

— Mathijs Segers

var keepTheInputCloned = setInterval(function(){                          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);         },50);         setTimeout(function(){clearInterval(keepTheInputCloned)},1000);

— Mathijs Segers

Tengo un problema similar con Safari en Mavericks. Pero cuando utilizo el método 5, lo duchan por un segundo (o tres segundos cuando configuro el tiempo de espera en 3000) y luego el navegador gana y tengo el autocompletado activado. En mi caso de uso, le pido al usuario su nombre de usuario / contraseña para otro sitio para poder obtener información del otro sitio, por lo que definitivamente no quiero que complete automáticamente el nombre de usuario y la contraseña que usan para mi sitio. ¿Alguna idea sobre esto (además de la fatalidad del # 3 original)?

— Jack RG

218

Truco 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: 0 0 0 50px white inset;/*your box-shadow*/
    -webkit-text-fill-color: #333;
}

— Tamás Pap
fuente

10

Esto es realmente inteligente. :)

— Jordan Gray

3

+1000 (si pudiera) Sí, no puedo encontrar otra forma de hacer esto. Esto es realmente intrusivo de webkit ...

— o_O

1

increíble, esta debería ser la respuesta número uno, simple y efectiva

— Pixelomo

3

Esto es increíble porque funciona y es realmente creativo. Pero me recuerda a los viejos hacks de IE6 y similares. Un poco mal de Google para darnos un parámetro: -webkit-autofill y no permitir que los diseñadores anulen el predeterminado, ¿verdad?

— squarecandy

1

Proporcionar una opción de color que no se puede personalizar no ayuda a la usabilidad ni a la accesibilidad. Esas preocupaciones todavía están completamente en manos del desarrollador, a excepción de este truco frustrante en Chrome. Nadie puede criticar la intención de los desarrolladores de Chrome, solo los resultados.

— Lunster

25

Agregue esta regla CSS y desaparecerá el color de fondo amarillo. :)

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

— MCBL
fuente

1

Esto funcionó para mí, ¡gracias! (aunque necesitaba cambiar el blanco al color que realmente quería)

— jennEDVT

2

Claramente la mejor respuesta.

— Brandon Harris

16

<form autocomplete="off">

Casi todos los navegadores modernos lo respetarán.

— Jason Kester
fuente

77

Impresionante, pero solo resuelve el problema menos importante; ¿Cómo puedo mantener el autocompletado pero perder el estilo ( prntscr.com/4hkh ) webkit empuja por su garganta? o: aunque gracias

— casraf

1

En realidad, debería hacer ambas cosas. El cuadro solo se vuelve amarillo para hacerle saber que Chrome / Safari / FF lo ha llenado automáticamente con su contraseña. Si le dices que no se llene, no tendrá la oportunidad de colorearlo.

— Jason Kester

11

Sí, pero mira lo que he dicho: "¿cómo puedo mantener autocompletar pero pierden el estilo empujones webkit"

— casraf

El único problema autocompletees que no es válido en HTML antes de la versión 5.

— Paul D. Waite

15

Después de 2 horas de búsqueda, parece que Google Chrome todavía anula el color amarillo de alguna manera, pero encontré la solución. Funcionará también para planear, enfocar, etc. Todo lo que tienes que hacer es agregarlo !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á por completo el color amarillo de los campos de entrada

— don
fuente

Funciona para mí sin el 1000px, solo 0 en todas partes, -webkit-box-shadow: 0 0 0 0 recuadro blanco! Importante;

— Luis Lopez

3

También puede cambiar el atributo de nombre de los elementos de su formulario para que sea algo generado de modo que el navegador no lo rastree. SIN EMBARGO, firefox 2.x + y google chrome parecen no tener muchos problemas con eso si la url de solicitud es idéntica. Básicamente, intente 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 :)

— Dmitriy Likhten
fuente

3

Puede deshabilitar la finalización automática a partir de HTML5 (vía autocomplete="off"), pero NO PUEDE anular el resaltado del navegador. Podría intentar jugar con ::selectionCSS (la mayoría de los navegadores requieren un prefijo de proveedor para que funcione), pero eso probablemente tampoco lo ayudará.

A menos que el proveedor del navegador implemente específicamente una forma específica de proveedor de anularlo, no puede hacer nada con respecto a dichos estilos que ya pretenden anular la hoja de estilo del sitio para el usuario. Por lo general, se aplican después de aplicar las hojas de estilo e ignoran las ! importantanulaciones.

— Alan ciruela
fuente

3

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

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

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

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

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

Otra solución que he encontrado 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. ")

ingrese la descripción de la imagen aquí

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

— andstud.io
fuente

Lo que me gusta de esto es que a la mayoría de la gente NO LE GUSTARÍA que no se complete el formulario completo en una recarga de página (por ejemplo, un área de texto largo), pero permite que el desarrollador evite que se completen ciertos elementos (por ejemplo, el número de tarjeta bancaria). Sin embargo,

— molestamente

1

Si está en el campo de entrada, está intentando "no amarillo" ...

Establezca un color de fondo con css ... digamos #ccc (gris claro).
Add value = "sometext", que temporalmente llena el campo con "sometext"
(opcional) Agregue un pequeño javascript para que quede claro "algún texto" cuando vaya a colocar el texto real.

Entonces, 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='';" />

— caballo blanco
fuente

1

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

— Arjan
fuente

1

Creo que lo hará, pero ¿no sería un poco duro hacer esto 50 veces por segundo? Sé que funcionará y no será demasiado lento. Pero parece un poco demasiado.

— Mathijs Segers

0

La captura de pantalla a la que se vinculó dice que WebKit está utilizando el selector input:-webkit-autofillpara 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 se resaltan para alertar al usuario de que se han llenado automáticamente con información privada (como la dirección particular del usuario) y se podría argumentar que permitir que se oculte una página es un riesgo para la seguridad.

— benzado
fuente

0

El formelemento tiene un autocompleteatributo que puede establecer en off. A partir del CSS, la !importantdirectiva después de una propiedad evita que se anule:

background-color: white !important;

Solo IE6 no lo entiende.

Si te entendí mal, también está la outlinepropiedad que podrías encontrar útil.

— zneak
fuente

2

Chrome parece ignorar lo importante cuando se

— llena

@Torandi Puede ser debido a las hojas de estilo de agente de usuario. La configuración de las hojas de estilo de agente de usuario debe aplicarse en último lugar, a menos que tenga la !importantdirectiva, en cuyo caso tiene prioridad sobre todo lo demás. Debería consultar la hoja de estilo de su agente de usuario (aunque no sé dónde encontrarla).

— zneak

0

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>

— Adán
fuente

0

Después de probar muchas cosas, encontré soluciones de trabajo que destruyeron 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", adjunta rápidamente eventos de "cambio" a todas las entradas involucradas. Prueba si se han llenado automáticamente. 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, permitiendo así 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);
  }
});

— Ernests Karlsons
fuente

0

Solución javascript simple 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 );

Clonar entrada, restablecer atributo y ocultar entrada original. Se necesita tiempo de espera para iPad

— Pizca
fuente

0

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

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

— Kt Mack
fuente

0

He leído tantos hilos e intento tantos códigos. Después de reunir todo eso, la única forma en que encontré vaciar limpiamente los campos de inicio de sesión y contraseña y restablecer su fondo a blanco fue 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);
});

Siéntase libre de comentar, estoy abierto a todas las mejoras si encuentra alguna.

— TwystO
fuente

0

Autocompletar desactivado no es compatible con los navegadores modernos. La forma más fácil de resolver el autocompletado 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"/>

El autocompletado comienza después de cargar la ventana. Está bien. Pero cuando el tipo de su campo no es 'contraseña', el navegador no sabía qué campos debía completar. Por lo tanto, no habrá autocompletado en los campos del formulario.

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

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

En onInputPasswordFocusIn, simplemente cambie el tipo de su campo a contraseña, con una simple verificació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 complete automáticamente los campos, segundo permitirá ingresar datos.

— volodymyr3131
fuente

Bueno, el autocompletado es parte del estándar, aunque su uso e implementación pueden variar. Además, cambiar los tipos de entrada en IE falla espectacularmente, por lo que jQuery lo bloquea, pero en general no es una buena idea si planea apoyar IE developer.mozilla.org/en-US/docs/Web/Security/…

— casraf

@casraf Lo sentimos, es parte del estándar, pero no funciona en todos los navegadores modernos como debe ser, por lo que no hará lo que se inventó. En EDGE funciona bien, sobre versiones anteriores no se puede decir nada (

— volodymyr3131

Es cierto que no se implementa en todas partes. El problema sigue en pie, dependiendo de cuánto tiempo atrás desee admitir IE, antes de la versión 11, no creo que pueda cambiar el tipo de entrada. Si no le preocupan las versiones antiguas, entonces también podría usar autocomplete=off, ya que funciona en FF, Chrome por un tiempo e IE a partir de la versión anterior más o menos

— casraf

Intenté usar autocomplete = off, tanto para las entradas como para el formulario, y Chrome aún llena los datos de los formularios de registro e inicio de sesión (. Esto es solo una especie de magia extraña, porque según los comentarios, en algunos casos funciona, y en algunos no lo hace =)

— volodymyr3131

Lo sé, estas normas realmente no se siguen de manera consistente. Es una pena, nos hace la vida más difícil :(

— casraf

0

Intente con autocomplete = "none" en su etiqueta de entrada

Esto funciona para mi

— Vayodya Tamari
fuente

0

También tuve que cambiar el color del texto a algo más oscuro (vea los colores oscuros del tema StackOverflow).

Así que terminé con un híbrido de @ Tamás Pap, @MCBL y la solución de @ don:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px #2d2d2d inset !important;
    -webkit-text-stroke-color: #e7e8eb !important;
    -webkit-text-fill-color: #e7e8eb !important;
}

— Andrei
fuente

-3

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

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

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

[editar] Después de publicar esto, vi que ya se había dado una respuesta similar y que comentaste que no funcionó. No entiendo por qué porque funcionó cuando lo probé.

— Kris
fuente

no funciona tanto en cromo como en safari. el estilo es input:-webkit-autofilly input --webkit-autocompletesimplemente no existe

— ruruskyi

@EliseuMonar: Estoy bastante seguro de que no estaba mintiendo, pero no puedo recordar detalles de cómo o dónde lo probé. El código en sí probablemente fue escrito desde la memoria, no copiado / pegado, ¿entonces autocompletar versus autocompletar? No se.

— Kris

-3

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 'name'), entonces cuando el usuario regresa a la página, el autocompletado se realizará en el campo de entrada del PRIMER [formulario] en la página, no en el [formulario] que se envió. La segunda vez, el NEXT [formulario] se completará automáticamente, y así sucesivamente. Solo se verá afectado [formulario] con un campo de texto de entrada con el MISMO nombre.

Esto debe informarse a los desarrolladores de Webkit.

Opera rellena automáticamente el [formulario] correcto.

Firefox e IE no se llena automáticamente.

Entonces, digo nuevamente: este es un error en Webkit.

— Por Lindberg
fuente