En este artículo, veremos cómo deshabilitar la propiedad de autocompletar del navegador en el campo de entrada. Para ello se crea una página HTML en la que se importa jQuery CDN para usar jQuery y se escribe su código.
Acercarse:
- Cree una página HTML básica que tenga al menos un campo de entrada con el atributo «id».
- Importe jQuery CDN desde la etiqueta del script para usar jQuery en la página.
- Luego, escriba el código jQuery en la etiqueta del script para deshabilitar el autocompletado en el campo de entrada.
Para lograr esto, usamos dos métodos de jQuery para establecer el valor del atributo en el campo:
Ejemplo 1: Usando el método attr()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width,initial-scale=1.0">
<!-- Import jQuery cdn library -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
// Execute this code when page is
// totally loaded
$(document).ready(function () {
/* Setting the autocomplete of
input field to off to make
autofill to disable */
$("#name").attr("autocomplete", "off");
});
</script>
</head>
<body>
<label for="name">Name:</label>
<input type="text" name="name" id="name">
</body>
</html>
Producción:
Esta será la salida del código.
Ejemplo 2: Usando el método prop()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Disable Autofill</title>
<!-- Import jQuery cdn library -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
// Execute this code when page is
// totally loaded
$(document).ready(function () {
/* Setting the autocomplete of
input field to off to make
autofill to disable */
$("#name").prop("autocomplete", "off");
});
</script>
</head>
<body>
<label for="name">Name:</label>
<input type="text" name="name" id="name">
</body>
</html>
Producción:
Salida de código. En este campo no hay autocompletar