How to detect browser autofill using JavaScript?

24 Sep, 2021
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
<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>
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 filed 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
<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>
working model image
anikakapoor
JavaScript-Questions
Picked
Technical Scripter 2020
JavaScript
Technical Scripter
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Roadmap to Learn JavaScript For Beginners
Difference Between PUT and PATCH Request
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?