We will learn how to detect browser autofill using javascript. Here we are going to use 3 programming languages HTML, CSS, Jquery to solve this problem in the best and well-defined way. In all web browser autofill is the feature that automatically fills the form fields such as email, address, password, etc. which the user previously entered that same browser to use this feature the user must need to enable this feature in that browser.
Auto complete is more related to autofill: Before discussing these points assuming that you are well known about form tag in HTML. This tag provides a tag named auto-complete if we set the value of this attribute to on if you will not mention this attribute then by default it is on. It means that the browser is free to store values submitted and to autofill them in the form fields.
The autofill field names tell the browser what type of information a field expects. So let’s understand this by seeing an example.
In this example, we are going to take one text box which takes the email id as input. If we select any emails showing in the box under the text box it will replace the value of the text.
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link href=
rel="stylesheet"
integrity=
"sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"/>
<script src=
integrity=
"sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous">
</script>
<script src=
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>
|
In this approach, we are going to use the Jquery method as well as simple javascript to complete this example project. In this example, we take one text box which takes the email id as input. Before trying this example make sure that your browser support auto-completes features and also enabled by you.
Steps:
- When autofill anything in the form field you may see that the background color is changed to another color by your browser. This is our key event to detects the autofill.
- Here in this example, we are going to take a jquery event to detects autofill named as blur and input.
- The blur event occurs when an element loses focus and the input event occurs when you enter some letter in the input field.
$('#email').on('blur input', function() {
//do something<
});- Initially we assign a color to the input field i.e gold (we can take any color here I take gold). If any changes occur in the color of the input field then the above jquery event is triggered.
- Inside this function, we are going to check if the background state is changed or not if it changed then an alert message will be shown.
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link href=
rel="stylesheet"
integrity=
"sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"/>
<script src=
integrity=
"sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous">
</script>
<script src=
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=
</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>
|
working model image