如何禁用HTML表单和输入字段上的浏览器自动填充和自动完成

HTML的 autocomplete 属性指定是否应该为输入字段启用或禁用自动完成。它使浏览器能够预测该值。当用户开始在字段中输入时，浏览器应该根据先前键入的值显示填充选项。它适用于输入<input>元素以及接受文本或数字值输入的<textarea>元素、<select>元素和<form>元素。

这个属性有两个值，on和off。

On： 它指定启用自动完成。
Off： 它指示自动完成被关闭。

用户开始在HTML表单字段中输入时，默认情况下浏览器会启用自动完成功能。许多用户允许浏览器收集表单数据，这使得他们可以在将来的表单中使用自动完成。然而，有时可能会出现无法正确工作的情况，或者用户必须手动输入所有详细信息。此外，用户可能对隐私存在担忧，因此浏览器可以允许他们禁用自动完成。

设置 autocomplete=”off” 对于我们的表单和字段有两个效果。它指示浏览器不要在类似的表单中保存用户输入数据以供后续自动完成，尽管特定于浏览器的算法可能有所不同。它允许浏览器避免在会话历史中缓存表单数据。当表单数据保存在会话历史中时，即使表单已经被提交并且用户点击了返回到初始表单页面的“返回”按钮，用户输入的信息仍然会显示。

要在表单和输入标签中禁用自动完成，我们可以使用<input>和<form>元素的autocomplete属性。

使用autocomplete=”off”

在以下示例中，我们将为整个表单和所有输入元素设置autocomplete为“off”以禁用它。

示例

<!DOCTYPE html>
<html>
  <head>
    <title>
        How to Disable the Browser Autocomplete and Autofill on HTML Form and Input Fields?
    </title>
    <style>
        .box{
            background-color:thistle;
            padding:10px;
            width:380px;
        }
        div{
            margin:20px;
        }
        h3{
            margin-left:20px;
        }
    </style>
  </head>
  <body>
    <h3>Student Details</h3>
    <div class="box">
    <form action="/form/submit" method="get" autocomplete="off">
      <div>
        <label for="name">Name:
        <input type="text" name="name" id="name" autocomplete="off">
        </label>
      </div>
      <div>
        <label for="rno">Roll Number:
        <input type="number" name="rno" id="rno" autocomplete="off">
        </label>
      </div>
      <div>
        <label for="backlogs">Active Backlogs:
        <input type="number" name="backlogs" id="backlogs" autocomplete="off">
        </label>
      </div>
      <div>
        <label for="cgpa">CGPA:
        <input type="number" name="cgpa" id="cgpa" autocomplete="off">
        </label>
      </div>
      <div class="btn">
      <input type="submit" value="Submit">
      </div>
    </form>
    </div>
  </body>
</html>

使用autocomplete=”false”

这个例子展示了如何通过在表单的第一个子元素中添加一个具有autocomplete=”false”的隐藏输入来禁用自动完成。

例子

<!DOCTYPE html>
<html>
  <head>
    <title>
        How to Disable the Browser Autocomplete and Autofill on HTML Form and Input Fields?
    </title>
    <style>
        .box{
            background-color:thistle;
            padding:10px;
            width:380px;
        }
        div{
            margin:20px;
        }
        h3{
            margin-left:20px;
        }
        .hidden {
            display: none;
        }
    </style>
  </head>
  <body>
    <h3>Student Details</h3>
    <div class="box">
    <form action="/form/submit" method="post" autocomplete="off">
      <input autocomplete="false" name="hidden" type="text" class="hidden">
      <div>
        <label for="name">Name:
        <input type="text" name="name" id="name">
        </label>
      </div>
      <div>
        <label for="rno">Roll Number:
        <input type="number" name="rno" id="rno">
        </label>
      </div>
      <div>
        <label for="backlogs">Active Backlogs:
        <input type="number" name="backlogs" id="backlogs">
        </label>
      </div>
      <div>
        <label for="cgpa">CGPA:
        <input type="number" name="cgpa" id="cgpa">
        </label>
      </div>
      <div class="btn">
      <input type="submit" value="Submit">
      </div>
    </form>
    </div>
  </body>
</html>

现代浏览器不支持在登录字段中使用autocomplete=”off”，因为许多用户不希望浏览器记住他们的密码。无论是输入字段还是表单字段，禁用自动完成对于登录字段来说都没有区别。

当网站在form>或input>元素中指定autocomplete=”off “，并包含用户名/密码字段时，浏览器仍会记住这些字段，并且如果用户接受，浏览器会在用户下次访问该网站时自动填充这些字段。因此，用户可以使用autocomplete=”new-password”来提示浏览器不要对其做出反应。

使用JavaScript和jQuery

可能有一些更好的方法可以使用JavaScript和jQuery禁用自动完成和自动填充。让我们看一个例子。

示例

<!DOCTYPE html>
  <head>
    <title>
        How to Disable the Browser Autocomplete and Autofill on HTML Form and Input Fields?
    </title>
    <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
  </head>
  <body>
    <form action="/form/submit" method="post">
      <div class="container">
        <input type="text" id="name" name="username" placeholder="Name">
        <br><br>
        <input type="number" id="phoneno" name="phoneno" placeholder="Phone Number">
        <br><br>
        <button type="submit">Submit</button>
      </div>
    </form>
    <script>
      (document).ready(function() {('input').attr('autocomplete', 'off');
      });
    </script>
  </body>
</html>