如何使用 JavaScript 检测浏览器自动填充？

我们将学习如何使用 javascript 检测浏览器自动填充。在这里，我们将使用 3 种编程语言 HTML、CSS、Jquery 以最好且定义明确的方式解决这个问题。在所有 Web 浏览器中，自动填充是自动填充表单字段（例如电子邮件、地址、密码等）的功能，用户之前输入了相同的浏览器以使用此功能，用户必须在该浏览器中启用此功能。

自动完成与自动填充更相关：在讨论这些要点之前，假设您对 HTML 中的表单标签非常了解。如果我们将此属性的值设置为 on 如果您不提及此属性，则此标记提供一个名为 auto-complete 的标记，则默认情况下它是 on。这意味着浏览器可以自由地存储提交的值并在表单字段中自动填充它们。

自动填充字段名称告诉浏览器字段需要什么类型的信息。所以让我们通过一个例子来理解这一点。

在此示例中，我们将采用一个文本框，该文本框将电子邮件 ID 作为输入。如果我们选择文本框下方框中显示的任何电子邮件，它将替换文本的值。

HTML

  
    
    
    
         
    
    
         
  
  
 
  
    
      
        GeeksforGeeks
      
      Email
      
    
  

在这种方法中，我们将使用 Jquery 方法以及简单的 javascript 来完成这个示例项目。在此示例中，我们采用一个文本框，该文本框将电子邮件 ID 作为输入。在尝试此示例之前，请确保您的浏览器支持自动完成功能并由您启用。

脚步：

• 在表单字段中自动填充任何内容时，您可能会看到浏览器将背景颜色更改为另一种颜色。这是我们检测自动填充的关键事件。
• 在此示例中，我们将使用 jquery 事件来检测名为 blur 和 input 的自动填充。
• blur 事件在元素失去焦点时发生，而 input 事件在您在输入字段中输入某个字母时发生。

$('#email').on('blur input', function() {
   //do something<
});

• 最初我们为输入字段分配一种颜色，即金色（我们可以在这里取任何颜色，我取金色）。如果输入字段的颜色发生任何变化，则触发上述 jquery 事件。
• 在此函数中，我们将检查背景状态是否已更改，如果已更改，则会显示警告消息。

HTML

  
    
    
    
         
    
    
         
    
  
 
  
    
      
        GeeksforGeeks
      
      
        AutoFill Detects!!!
      
      Email:
      
    
    
    
    
      // 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");
        }
      });
    
  

工作模型图像