關於火狐瀏覽器刷新不重置表單元素

時間 2019-11-13

標籤關於火狐瀏覽器刷新重置表單元素欄目 Firefox 简体版

原文原文鏈接

今天測試發現一個問題，通過反覆測試發現是瀏覽器引發的。html

情景demo以下：chrome

在某個簡單頁面中，好比值包含一個text的輸入框，內容爲空瀏覽器

隨便輸入一些內容，好比「test」;測試

按F5刷新，展示結果。網站

在chrome中輸入框內容爲初始的空狀態url

在火狐瀏覽器中輸入框則展示了剛剛輸入的「test」（版本 48.0.2）spa

<html>.net

<body>code

<input type="text" value="">orm

</body>

</html>

在火狐中只有按ctrl+F5 強制刷新纔會出現空狀態

解決辦法：

在網上找到一種辦法，就是在元素上加上屬性 autocomplete 並設置爲off

<input type="text" value="" autocomplete="off">

這個屬性是HTML5 新增長的，在w3school中找到以下解釋（w3school連接）：

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

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

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

提示：在某些瀏覽器中，您可能須要手動啓用自動完成功能。

HTML 4.01 與 HTML 5 之間的差別

autocomplete 屬性是 HTML5 中的新屬性。

語法

<input autocomplete="value">

屬性值

值	描述
on	默認。規定啓用自動完成功能。
off	規定禁用自動完成功能。

目前不知道設置成off後不友好的地方，有待發現

若是你有更好的方案或者對於這個屬性更深刻的瞭解，歡迎留言一塊兒討論

原文參考：

網站兼容——火狐瀏覽器刷新沒有清空表單

瀏覽器的自動補全問題 autocomplete，刷新頁面表單元素仍是展現修改後的值

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。