前言

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

問題由來？

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

解決途徑：

1.追本溯源

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

2.Google 神器

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

定義和用法

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

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

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

3.雙管齊下

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

總結(jié)：

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

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

更新一下問的最多的問題

通過 Ajax 提交能否記??？

答案是：能！

實現(xiàn)方法：使用原生 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>

以上純屬個人學(xué)習(xí)總結(jié)，如有疏漏或者不足之處還望指正，謝謝！