前言

最近在開發項目的過程使用了 餓了么的 UI 組件，不過在開發過程中遇到了一個問題。在使用 Element 的 input 輸入框的時候即使開啟了原生的記憶性輸入屬性（即自動補全），頁面上也無法記住任何表單數據或者說用戶名和密碼。

問題由來？

基于 Vue 對已有進行項目重構，原有項目基于JQuery & Bootstrap，重構方案采用 Vue & Element，項目初版完成后發現原本登錄頁面輸入框可以記憶密碼的功能失效了，雖然網上大多數都建議不記憶密碼并禁用輸入框記憶密碼的屬性，但是輸入框的記憶功能還是很方便的，所以打算恢復記憶功能。

解決途徑：

1.追本溯源

由于使用的是 Element UI ，所以首先沖官方文檔找解決方案，經過多番測試發現貌似 Element UI 官方實例中的輸入框也無法記住密碼，即使加上了官方文檔中的 auto-complete="on" 依然無效。

2.Google 神器

網上并沒有針對此問題的答案，于是換個方式搜索答案，搜索 “輸入框的記憶屬性”，幾乎所有的回答都指向輸入框或者表單的原生 autocomplete 屬性，但是這個屬性默認是自動打開的，詳細說明見下圖：

定義和用法

• autocomplete 屬性規定輸入字段是否應該啟用自動完成功能。
• 自動完成允許瀏覽器預測對字段的輸入。當用戶在字段開始鍵入時，瀏覽器基于之前鍵入過的值，應該顯示出在字段中填寫的選項。

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

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

3.雙管齊下

由于 DOM 是通過 Element UI 來進行渲染的，所以在加上了官方文檔上的 auto-complete="on" 配置后，我還手動強制給渲染后的輸入框加上的原生的 autocomplete 屬性，依然沒有絲毫效果。后來通過反復刪減測試 runoob.com 上的列子，發現原來問題真正的源頭在 name 屬性！只有在刪除例子中的 name 屬性時，輸入框的記憶屬性才會失效，加上又會恢復。于是立馬放入自己的項目中測試發現，果不其然 !

總結：

之所以項目中的輸入框沒有加上 name 屬性，歸根結底在于 Vue 的引入使得對數據的操作前所未有的方便，再加之雙向數據綁定的特性，在提交表單時早已摒棄了原生通過 Form 來 submit 表單的方式 ，而是直接通過操作數據來進行提交，name 屬性也就失去了其用意義。然而沒想到的是 name 屬性的意義并不只是在于提交表單這一方面，他還有一個隱藏屬性：“支持表單的記憶功能”！

至此，通過加上 name 屬性，問題圓滿解決！

更新一下問的最多的問題

通過 Ajax 提交能否記??？

答案是：能！

實現方法：使用原生 type="submit" 按鈕并禁用表單默認提交

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" onsubmit="return false;">
    <el-form-item prop="test">
      <el-input v-model="ruleForm.test" name="test" auto-complete="on"></el-input>
    </el-form-item>
    <button type="submit" @click="submitForm">提交</button>
</el-form>

以上純屬個人學習總結，如有疏漏或者不足之處還望指正，謝謝！