Skip to content
Related Articles

Related Articles

How to disable browser autofill on input fields using jQuery ?
  • Last Updated : 21 Dec, 2020

In this article, we will see how to disable the browser auto fill property on the input field. For that, HTML page is created in which jQuery CDN is imported to use jQuery and its code is written.

Approach:

  • Create a basic HTML page having at least one input field in it with the “id” attribute.
  • Import jQuery CDN from script tag to use jQuery on the page.
  • Then write the jQuery code in the script tag for disabling autofill on the input field.

To achieve this, we use two methods of jQuery to set the attribute value to the field:

Example 1: Using attr() method

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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=
    </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>

chevron_right


Output:



This will be output of code

Example 2: Using prop() method

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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=
    </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>

chevron_right


Output:

Output of code. In this field there is no autofill

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :