如何去除瀏覽器input自動填充效果

2021-08-19 01:42:44 字數 910 閱讀 5189

今天寫登入介面的輸入框時輸入框時,發現乙個問題。

我的登入介面兩個輸入框的大體**如下:

理想的開啟登入介面的效果圖如下:

如果瀏覽器儲存了表單使用者名稱和密碼的話,開啟介面的時候效果圖如下:

主要是這兩個屬性:autocomplete="off"和type="text" οnfοcus="this.type='password'"。一般的type="text"的input可以採用autocomplete="off"解決。w3c對autocomplete的屬性描述如下:

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

既然type="text"

的問題解決了,

type="password"

的問題其實也可以借鑑它,我們初始化的時候讓

type="text"

,並設定

autocomplete="off"

,當input

聚焦時,把

type

從text

轉化為password

。一般表單填充只有初始化的時候,只要我們在初始化的時候轉化為

text

就可以解決問題了。

//搜尋框

//下面是額外加的標籤

autocomplete="off"很有可能不能單獨使用,要和autocomplete="new-password"結合起來使用才有效果。

填坑 瀏覽器 0

萬惡淫為首。但凡要做大事,不光要有動機,更要做好規劃。題記 距離上週已經有一周了,山人自覺已然將瀏覽器規劃做了十之 放在下面,藉以拋磚引玉。分割線 以上是廢話,以下是正文 程式設計的主要目的不是單純的憑藉自己對某種語言的熟練程度,完全拒絕借鑑地憑空創造,而是利用所有可用的資源 創作出無漏洞無bug的...

如何禁止瀏覽器自動填充

瀏覽器的儲存賬戶密碼功能,給我們帶來了很大的便利,但是在有些情況下,我們並不希望瀏覽器幫我們填充一些表單,然而autocomplete的一些引數項並不能阻止瀏覽器回填,這裡我們來看下如何解決這個問題。專案註冊部分的表單有三項,分別為手機號 驗證碼和密碼,當完成註冊操作後,瀏覽器提醒是否儲存密碼,使用...

vue 取消input回車瀏覽器自動換行事件

需求 回車自動變成標籤放在下面。最終效果 碰到的問題 按回車之後文字總是會先有換行符再進方法,導致非空校驗無效,因此取消了瀏覽器回車自動換行行為,問題解決。template placeholder type textarea maxlength 10 v model keyword keydown....