Deshabilitar el relleno automático y autocompletar: Chrome | Scriptcase Blog - Development, Web Design, Sales and Digital Marketing

Hola, aquí quiero mostrar una alternativa para deshabilitar el relleno automático y el autocompletar del navegador chrome en las pantallas de inicio de sesión.

Lo que se observa es que el navegador Chrome, desde hace algún tiempo, no ha respetado más el atributo autocomplete = off en los elementos input.

Por eso decidí iniciar una búsqueda por algo que hiciera posible “eludir” esa configuración de Chrome, y después de una larga investigación en Internet y diversas pruebas, donde varias sugerencias no funcionan y otras hasta funcionan pero no eran adaptables al Scriptcase, ¡conseguí llegar a una opción ajustable!

La siguiente sugerencia inhibe la ventana flotante con las contraseñas guardadas, el relleno automático y el fondo amarillo de la ventana Login y Contraseña.

A continuación, imagen de una pantalla de inicio de sesión sin aplicación de la desactivación del autocomplete:

Vamos al código:

Para editar la aplicación por el IDE de Scriptcase, tenemos a la derecha la opción Javascript, justo debajo de SQL.

Seleccione el objeto: Form y el evento: onLoad, haga clic en editar y agregue el código siguiente:

$(':input').attr('autocomplete','off');  //agregando el atributo autocomplete con valor off a todos los elementos input.
$("#login_troca").val(''); //vaciando el valor del elemento input de id login_cambio.
$("#pswd_troca").val(''); //vaciando el valor del elemento input de id pswd_troca.
setTimeout(function(){ //iniciando un temporizador donde el siguiente código se ejecutará después de 500 milisegundos
$("#login_troca").css('display','none'); //ocultando el elemento de id login_troca
$("#pswd_troca").css('display','none'); ////ocultando el elemento de id pswd_troca
}, 500);

** No olvide guardar el código. **

Ahora vamos a los campos login y pswd (nombre de los campos sugeridos en este ejemplo).

En las propiedades del campo de login, colocaremos el siguiente valor para la propiedad Label del campo:

<input id="login_cambio" type="text" name="login" size="1" width="1" height="" autocomplete="off" style=" z-index: -1000; height: 1px; width: 1px;     border: none; position:absolute; ">Login

Lo mismo para la etiqueta del campo pswd:

<input id="pswd_cambio" type="password" name="pswd" size="1" autocomplete="off" style="z-index: -1000; height: 1px; width: 1px; border: none;     position: absolute; ">Senha

El atributo Style con sus propiedades y valores agregados inline son sólo para dejar el elemento de entrada lo menos perceptible posible.

Listo! Guarde y pruebe la aplicación.

Explicando:

Chrome asignó al primer elemento de name = “NAME” el auto-relleno. ¿Qué hemos hecho? Duplicamos el elemento de name = “NAME” y lo hacemos transparente y después de medio segundo de la carga de la página ocultamos ese campo. Esto engaña al navegador, haciendo que asigne el autocomplete al primer campo de name = “NAME” encontrado, no asignando el autocompletado al segundo elemento del mismo nombre.

Es una solución de contorno que alivia esta desagradable opción en las pantallas de login, dejando también la pantalla de login más ligera sin las ventanas con fondo amarillo con auto-relleno.

Bueno, esa fue una alternativa que descubrí para ‘resolver’ esa cuestión del autocomplete y auto-relleno automático en Chrome, ajustable a nuestro Scriptcase.

Espero que le sea útil así como fue para mí!

Ah! Pero una cosa, si usted todavía no conoce el Scriptcase, le invito a descargar y probar esta herramienta:

https://www.scriptcase.net/descargar/  

Tambien te puede interesar

Principales características de un buen desarrollador web

Quizás en algún momento se haya preguntado qué habilidades se necesitan para convertirse en desa...

¿Scriptcase usa MVC?

En la actualidad es habitual la implementación del patrón de arquitectura de software llamado MV...

Cómo Implementar A2F usando un Desarrollo Propio en NodeJS en una aplicación Scriptcase

En un anterior a2f artículo hablamos de Swivel como herramienta externa para integrar nuestras apl...

Comentar este post

Reciba los nuevos post, novedades y ofertas!

Ingresa tu e-mail para recibir orientaciones y asistencia técnica durante el período de evaluación, además de comunicaciones como novedades y ofertas especiales de Scriptcase. Tu información será utilizada de acuerdo con nuestra política de privacidad. Puedes optar por no participar en cualquier momento