Aprenderemos cómo detectar el autocompletado del navegador usando javascript. Aquí vamos a utilizar 3 lenguajes de programación HTML, CSS, Jquery para resolver este problema de la mejor manera y mejor definida. En todos los navegadores web, el autocompletado es la función que completa automáticamente los campos de formulario, como correo electrónico, dirección, contraseña, etc., que el usuario ingresó previamente en ese mismo navegador para usar esta función, el usuario debe necesitar habilitar esta función en ese navegador.
Autocompletar está más relacionado con autocompletar: antes de discutir estos puntos, suponga que conoce bien las etiquetas de formulario en HTML. Esta etiqueta proporciona una etiqueta denominada autocompletar si establecemos el valor de este atributo en activado. Si no menciona este atributo, entonces está activado de forma predeterminada. Significa que el navegador puede almacenar los valores enviados y autocompletarlos en los campos del formulario.
Los nombres de campo de autocompletar le dicen al navegador qué tipo de información espera un campo. Así que entendamos esto viendo un ejemplo.
En este ejemplo, vamos a tomar un cuadro de texto que toma la identificación del correo electrónico como entrada. Si seleccionamos cualquier correo electrónico que se muestre en el cuadro debajo del cuadro de texto, reemplazará el valor del texto.
HTML
<html> <head> <!-- Latest compiled and minified CSS --> <link href= "https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"/> <script src= "https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity= "sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"> </script> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity= "sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"> </script> </head> <body> <div class="container"> <div style=" font-weight: 600px; color: green; font-size: 20px; text-align: center;"> GeeksforGeeks </div> <label for="email">Email</label> <input type="text" id="email" placeholder="gmail" style="margin-top: 20px" name="email"/> </div> </body> </html>
En este enfoque, vamos a utilizar el método Jquery, así como JavaScript simple, para completar este proyecto de ejemplo. En este ejemplo, tomamos un cuadro de texto que toma la identificación del correo electrónico como entrada. Antes de probar este ejemplo, asegúrese de que su navegador sea compatible con las funciones de autocompletado y que también las haya habilitado.
Pasos:
- Cuando autocompleta algo en el campo del formulario, es posible que vea que su navegador cambia el color de fondo a otro color. Este es nuestro evento clave para detectar el autorrelleno.
- Aquí, en este ejemplo, vamos a tomar un evento jquery para detectar el autocompletado llamado desenfoque y entrada.
- El evento de desenfoque ocurre cuando un elemento pierde el foco y el evento de entrada ocurre cuando ingresa alguna letra en el campo de entrada.
$('#email').on('blur input', function() {
//do something<
});
- Inicialmente asignamos un color al campo de entrada, es decir, dorado (podemos tomar cualquier color aquí, yo tomo dorado). Si se produce algún cambio en el color de la entrada archivada, se activa el evento jquery anterior.
- Dentro de esta función, vamos a verificar si el estado de fondo ha cambiado o no, si cambió, se mostrará un mensaje de alerta.
HTML
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
crossorigin="anonymous"/>
<script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js"
integrity=
"sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi"
crossorigin="anonymous">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js"
integrity=
"sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG"
crossorigin="anonymous">
</script>
</head>
<body>
<div class="container">
<div
style="
font-weight: 600px;
color: green;
font-size: 20px;
text-align: center;">
GeeksforGeeks
</div>
<div
class="alert alert-danger"
role="alert"
style="display: none; margin-top: 10px">
AutoFill Detects!!!
</div>
<label for="email">Email:</label>
<input
type="text"
id="email"
placeholder="gmail"
name="email"
style="margin-top:20px;
background-color:gold;
margin-left:27px;"/>
</div>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
// Initial colour of input field
var inputbg = "rgb(255, 215, 0)";
// Get current background color of input field
let style = window.getComputedStyle(document.getElementById("email"));
$("#email").on("blur input", function () {
// Check if the background color matches
// the previous color or not
if (style && style.backgroundColor !== inputbg) {
// Show the bootstrap alert message
$(".alert").css("display", "table");
} else {
// Hide the bootstrap alert message
$(".alert").css("display", "none");
}
});
</script>
</body>
</html>
imagen del modelo de trabajo
Publicación traducida automáticamente
Artículo escrito por debadebaduttapanda7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA