How to detect browser autofill using JavaScript?
Last Updated :
23 Jan, 2023
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/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
crossorigin="anonymous"/>
<script src=
"https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
integrity=
"sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi"
crossorigin="anonymous">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/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 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
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
crossorigin="anonymous"/>
<script src=
"https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
integrity=
"sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi"
crossorigin="anonymous">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/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
Similar Reads
How to detect Adblocker using JavaScript ? In this article, we will be developing an adblocker detector using JavaScript. Adblocker is an extension that is used to block the ads which are served by the website. Adblocker blocks the DOM and the script which has the code to show ads. The adblockers have massive data of blocklist file names and
3 min read
How to Detect Keypress using JavaScript ? In this article, keyboard detection is performed using HTML and CSS. HTML stands for "Hypertext Markup Language". HTML language helps the developer to create and design web page elements like links, sections, paragraphs, headings, and blockquotes for web applications. CSS stands for "Cascading Style
2 min read
How to disable browser autofill on input fields using jQuery ? 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
2 min read
How to detect the version of a browser ? This article includes the basic theory and technique of browser detection in JavaScript-enabled web browsers. Description: Even though most of the scripts work on JavaScript-enabled web browser, there are certain things that is not going to work on some browsers i.e. they are browser dependent and i
4 min read
How to detect browser or tab closing in JavaScript ? Detecting browser or tab closure in JavaScript is essential for preventing data loss or unintended navigation. Using the beforeunload event, developers can prompt users with a confirmation dialog, ensuring they don't accidentally leave a page with unsaved changes or important information. The before
2 min read
How to create a PHP detection browser script ? A browser script is used to find the complete information of the web browser. A web browser is working on the hypertext transfer protocol and retrieves all the information on the internet and displays it on your desktop so that you can access all the things from anywhere. In this article, we will s
2 min read
How to detect copy paste commands Ctrl+V, Ctrl+C using JavaScript ? In this article, we will detect copy-paste commands Ctrl+V, and Ctrl+C using JavaScript. To detect the combination of keys with "Ctrl", we use the ctrl property of the keydown event. ApproachEvent Listener: The script adds an keydown event listener to the document.Element Access: It accesses the HTM
2 min read
How to detect the user browser ( Safari, Chrome, IE, Firefox and Opera ) using JavaScript ? The browser on which the current page is opening can be checked using JavaScript. The userAgent property of the navigator object is used to return the user-agent header string sent by the browser. This user-agent string contains information about the browser by including certain keywords that may be
4 min read
How to write a browser-specific code using jQuery ? In this article, we will see how to write browser-specific code using jQuery. To write the browser-specific code, we will use the Navigator userAgent property and jQuery indexof() method. The Navigator userAgent property is used to get the user-agent header’s value sent to the server by the browser.
2 min read
How to find whether browser supports JavaScript or not ? We will discuss how to find whether our Browser supports JavaScript or not. For this, we need to use the <noscript> tag, which defines an alternate text to be displayed to users who have disabled <script> tag in their Browsers. Since JavaScript is written inside <script> tag in HTM
2 min read