极客教程JavaScript 如何检测浏览器自动填充
我们将学习如何使用JavaScript检测浏览器的自动填充功能。在这里，我们将使用三种编程语言HTML、CSS和Jquery来以最佳和明确定义的方式解决这个问题。在所有的Web浏览器中，自动填充是一种自动填充表单字段（如电子邮件、地址、密码等）的功能，用户需要在浏览器中启用此功能才能使用。
自动完成与自动填充有更多关联： 在讨论这些点之前，假设您对HTML中的表单标签很了解。该标签提供了一个名为auto-complete的属性，如果我们将该属性的值设置为on，则表示默认为on，浏览器可以自由地存储提交的值并在表单字段中自动填充。
自动填充字段名称告诉浏览器字段期望的信息类型。让我们通过看一个示例来理解这个。
在这个示例中，我们将采用一个文本框，用于输入电子邮件地址。如果我们选择框下方显示的任何电子邮件，它将替换文本的值。
<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>
在这种方法中，我们将使用Jquery方法以及简单的JavaScript来完成这个示例项目。在这个示例中，我们使用一个文本框来输入电子邮件地址。在尝试这个示例之前，请确保您的浏览器支持自动填充功能，并且已由您启用。
步骤：
- 当在表单字段中自动填充任何内容时，您可能会看到浏览器将背景颜色更改为另一种颜色。这是我们检测自动填充的关键事件。
- 在这个示例中，我们将使用一个名为blur和input的jquery事件来检测自动填充。
- 当元素失去焦点时，会发生blur事件，当您在输入框中输入一些字母时，会发生input事件。
$('#email').on('blur input', function() {
//do something<
});
- 最初我们为输入字段分配一个颜色，即gold（我们可以选择任何颜色，这里选择了gold）。如果输入字段的颜色发生变化，则会触发上述的jquery事件。
- 在这个函数内部，我们将检查背景状态是否发生了变化，如果有变化，则会显示警告信息。
<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>
