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

GeekQiaQia發表於2019-04-18
前端面試H5

如何清除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"時候，將關閉自動完成功能，這時候，可以防止瀏覽器軟體或者惡意外掛對攔截獲取客戶歷史輸入記錄；防止洩密；

相關文章