最近專案上要求做到這一點，在網上搜了一圈，發現都是不完美的，不相容全部的瀏覽器，於是只能自己摸索了，最終得出了終極解決方案：

涉及：

disabled 或 readonly 

display:none;   隱藏用，隱藏後不佔位置

visibility:hidden;   隱藏用，隱藏後佔原來的位置

position:absolute;z-index:-1;   隱藏用，隱藏與否取決於z-index相對的值，這裡的-1是我自己用的

autocomplete:"off";  

網上說，這個屬性有時失效，有個解決辦法是將off改為new-password。

還有個說法(來自MDN)，之所以new-password能夠解決off失效的原因是autocomplete屬性的有效值只有on和off，預設值是on，

如果autocomplete的屬性是除on和off外的值，那麼就是個無效值，那麼瀏覽器就會放棄對該屬性的執行。

換句話說，除on和off外的任一值，可以隨便編都行。

在這裡，我用off就夠了，測試過程中沒遇到失效的情況，所以暫時用off。

程式碼如下：

（最簡潔）

<input type="text" name="name" value="admin" style="position: absolute;z-index: -1;" disabled autocomplete = "off"/><!-- 這個username會被瀏覽器記住，我隨便用個admin-->
<input type="password" name="pwd" value=" " style="position: absolute;z-index: -1;" disabled autocomplete = "off"/><!-- 這前面兩個name屬性要不要和真正的一樣，具體自己除錯下 -->
<p><input type="text" maxlength="20" placeholder="使用者名稱" id="name" name="name" autocomplete = "off"/></p>
<p><input type="password" maxlength="20" placeholder="密碼" id="pwd" name="pwd" autocomplete = "off"/></p>
<p><input type="text" maxlength="4" placeholder="驗證碼"  id="vcode" name="vcode" autocomplete = "off"/><img id="vcode" title="點選更換驗證碼" /></p>
<p><input type="button" value="登入" id="login"/></p>
<p style="visibility: hidden;"><input type="password" name="pwd" value=" " style="position: absolute;z-index: -1;" disabled autocomplete = "off"/></p><!-- 這個password的值會被瀏覽器記住，我隨便用個空格 -->
 

<input type="text" value="admin" style="position: absolute;z-index: -1;" disabled autocomplete = "off"/><!-- 這個username會被瀏覽器記住，我隨便用個admin-->
<input type="password"  value=" " style="position: absolute;z-index: -1;" disabled autocomplete = "off"/>
<input type="text" name="name" style="display: none;" disabled autocomplete = "off"/><!-- 這裡的autocomplete可以不要 -->
<input type="password" name="pwd" style="display: none;" disabled autocomplete = "off"/><!-- 這裡的autocomplete可以不要 -->
<p><input type="text" maxlength="20" placeholder="使用者名稱" id="name" name="name" autocomplete = "off"/></p>
<p><input type="password" maxlength="20" placeholder="密碼" id="pwd" name="pwd" autocomplete = "off"/></p>
<p><input type="text" maxlength="4" placeholder="驗證碼"  id="vcode" name="vcode" autocomplete = "off"/><img id="vcode" title="點選更換驗證碼" /></p>
<p><input type="button" value="登入" id="login"/></p>
<p style="visibility: hidden;"><input type="password"  value=" " style="position: absolute;z-index: -1;" disabled autocomplete = "off"/></p><!-- 這個password的值會被瀏覽器記住，我隨便用個空格 -->
 

ie瀏覽器（7~11，edge），360安全瀏覽器(全部模式)，360極速瀏覽器(全部模式)，谷歌瀏覽器，火狐瀏覽器，獵豹瀏覽器

分析以上程式碼的原因：

有的瀏覽器會自動記錄登入的賬號，並且會記錄第一個使用者名稱和最後一個密碼input。

對360安全瀏覽器，單數個的話360安全瀏覽器不會出現提示是否要儲存密碼。

disabled：和360瀏覽器、頁面第一個聚焦點有關。

改進過程：

一開始是在真正要用到的使用者名稱密碼input前面加兩個對應name的隱藏使用者名稱密碼input，用於對付瀏覽器的自動填充表單。

但是，這個方案有個缺點：瀏覽器會記住登入的賬號（有的瀏覽器會提示是否要記住），每當填寫密碼時（不用tab切換到，直接用滑鼠獲得焦點），

會提示是否使用以下密碼。這樣別人不僅僅能夠登入，並且還可以知道密碼的明文（瀏覽器審查元素改密碼input的type為text或在瀏覽器設定上檢視儲存的使用者名稱密碼）

經過N次的測試，發現= =瀏覽器只會記住第一個使用者名稱input的值和最後一個密碼input 的值，並且這些input不能用display：none。

於是在上面的基礎上，在前和後增加另一種隱藏方式的一組使用者名稱密碼input：用position:absolute;z-index:-1; 來隱藏

問題解決了，但是出現了一個小問題：360安全瀏覽器會提示是否記住密碼，並且，最重要的是，是輸入密碼的時候，還會提示是否使用以下項的密碼。

又經過N次的測試，發現，單數的input時，360安全瀏覽器不會再彈出是否記住密碼的提示。

最後發現，把最開始加的兩個display：none去掉也行，並且也是單數的input。

ok，完美。

結論：

<input type="text" value="admin" style="position: absolute;z-index: -1;" disabled autocomplete = "off"/><!-- 這個username會被瀏覽器記住，我隨便用個admin-->
<input type="password"  value=" " style="position: absolute;z-index: -1;" disabled autocomplete = "off"/>
<p><input type="text" maxlength="20" placeholder="使用者名稱" id="name" name="name" autocomplete = "off"/></p>
<p><input type="password" maxlength="20" placeholder="密碼" id="pwd" name="pwd" autocomplete = "off"/></p>
<p><input type="text" maxlength="4" placeholder="驗證碼"  id="vcode" name="vcode" autocomplete = "off"/><img id="vcode" title="點選更換驗證碼" /></p>
<p><input type="button" value="登入" id="login"/></p>
<p style="visibility: hidden;"><input type="password"  value=" " style="position: absolute;z-index: -1;" disabled autocomplete = "off"/></p><!-- 這個password的值會被瀏覽器記住，我隨便用個空格 -->

PS：z-index的值和autocomplete的值根據實際情況來調整。

可以根據新增一組或多組display：none 的使用者名稱密碼input和在input的外層加個<p style="visibility: hidden;"></p> 來調整顯示！

如果是表單，一樣的道理，這裡不多說了。(注意要在表單裡面加input)

如果不是登入頁面，而是其他的頁面，如修改密碼的頁面，可以用小招：在舊密碼input前面加個隱藏的密碼input

<input type="password" style="display: none;" disabled autocomplete = "off"/>

如果其他的頁面，不只有密碼，還有使用者名稱input，那麼與修改密碼頁面一樣，在前面加多個使用者名稱密碼input組合即可

<input type="text" style="display: none;" disabled autocomplete = "off"/>
<input type="password" style="display: none;" disabled autocomplete = "off"/>

或者(推薦)

<input type="text"  name="username" style="display: none;" disabled autocomplete = "off"/>
<input type="password" name="password" style="display: none;" disabled autocomplete = "off"/>

又或者(推薦)

<input type="text"  id="username" style="display: none;" disabled autocomplete = "off"/>
<input type="password" id="password" style="display: none;" disabled autocomplete = "off"/>

如：臨時text的id值和真實的text的name值一樣，或臨時text的name值和真實的name值一樣等等！！！

最後小tip：

每次登陸時（按回車或者點選登入），都將真正的使用者名稱密碼input置空比較好，處於安全考慮