前端面試：H5 如何清除Input輸入框屢次輸入的歷史記錄？

如何清除Input輸入框屢次輸入的歷史記錄？

前言

定義和用法

autocomplete 屬性規定輸入字段是否應該啓用自動完成功能。

自動完成容許瀏覽器預測對字段的輸入。當用戶在字段開始鍵入時，瀏覽器基於以前鍵入過的值，應該顯示出在字段中填寫的選項。

註釋：

autocomplete 屬性適用於 <form>，以及下面的 <input> 類型：
text, search, url, telephone, email, password, datepickers, range 以及 color。
複製代碼

語法：

<input autocomplete="value">
複製代碼

屬性值
值	描述
on	默認。規定啓用自動完成功能。
off	規定禁用自動完成功能。
複製代碼

舉例

在如下代碼中：啓用了自動完成功能的表單，可是在type="email"中，禁用了自動完成功能：

First name:
Last name:
E-mail:

<form action="demo_form.asp" method="get" autocomplete="on">
  First name:<input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
  E-mail: <input type="email" name="email" autocomplete="off" /><br />
  <input type="submit" />
</form>
複製代碼

原理是什麼？

autocomplete 屬性是 HTML5 中的新屬性。

• 當 屬性value="on"時候，將啓用自動完成功能，瀏覽器將歷史輸入值緩存，方便客戶下次快速選擇輸入歷史記錄；

• 當 屬性value="off"時候，將關閉自動完成功能，這時候，能夠防止瀏覽器軟件或者惡意插件對攔截獲取客戶歷史輸入記錄；防止泄密；

value="off" 不對谷歌瀏覽器有做用；此時將value設置爲「new-password」

MDN關於autocomplete的介紹