[筆記]Chrome類瀏覽器,避免自動填寫EMail奮鬥紀錄

  • 793
  • 0

Chrome核心的瀏覽器有許多,除了傳統Google的Chrome瀏覽器本身,還有Windows新版本的Edge, Apple的 Safari 都是,在開發的過程中,後台需要輸入EMail的欄位時,進入他都啟動自動填寫的機制,把該Domain曾經記錄過的帳密中的帳號,當作預設定的填寫資料,自動填入。這讓小喵無比的困擾~我明明是後台讓使用者填寫EMail,你自動填入帳號是要做啥~於是小喵開始與這個機制奮鬥。

緣起

Chrome核心的瀏覽器有許多,除了傳統Google的Chrome瀏覽器本身,還有Windows新版本的Edge, Apple的 Safari 都是,在開發的過程中,後台需要輸入EMail的欄位時,進入他都啟動自動填寫的機制,把該Domain曾經記錄過的帳密中的帳號,當作預設定的填寫資料,自動填入。這讓小喵無比的困擾~我明明是後台讓使用者填寫EMail,你自動填入帳號是要做啥~於是小喵開始與這個機制奮鬥。

這機制對於使用者真的是一種困擾,明明我要填寫的內容是EMail,網站登入的帳號不是EMail,可是只要表單出現EMail的欄位,就自動把曾經紀錄的帳密中的帳號,自動填入。(雞婆到令人抓狂)

表單內容

小喵輸入的html,使用bootstrap的輸入方式,內容大致如下:

<div class="form-group row">
	<label for="txtEMail" class="col-sm-2 col-form-label">EMail</label>
	<div class="col-sm-10">
		<input type="text" class="form-control" id="txtEMail" @bind="oUser.EMail" placeholder="aaa@bbb.ccc" />
	</div>
</div>

 

屬性autocomplete無效

小喵去搜尋各式解決的方式,包含以下的幾個方式,有些說有效,但是小喵全部撞牆,全部沒效(笑不出來)

  • autocomplete="off"
  • autocomplete="false"
  • autocomplete="autocomplete_off_hack_xfr4!k"
  • autocomplete="anyrandomstring"
  • autocomplete="nope"
  • autocomplete="new-password"

以上的種種,都沒有用,他依舊把我登入的帳號,進入編輯時,無論是否有資料,都自動填入覆蓋

解法

經過身心俱疲的各種嘗試,發現以上的方式都沒用後~小喵心想,是否它是抓小喵語法的關鍵字【EMail】來決定是否要雞婆的自動填入。
於是,小喵來嘗試避免【EMail】這樣的關鍵字出現在HTML中,改成這樣

<div class="form-group row">
	<label for="txtEE" class="col-sm-2 col-form-label">電子信箱</label>
	<div class="col-sm-10">
		<input type="text" class="form-control" id="txtEE" @bind="oUser.EMail" placeholder="aaa@bbb.ccc" />
	</div>
</div>

終於,乖了~不會再自(ㄐㄧ)動(ㄆㄛˊ)的幫我填入了。
小喵心想,那欄位【標籤label】改回來EMail,應該OK吧,結果實際上,他還是很熱(ㄐㄧ)心(ㄆㄛˊ)地幫我自動填上。
標籤還是乖乖地改回【電子郵件】

末記

chrome這樣的設計實在讓人困擾,又不規範一個避免的方式讓開發者可以用程式避免,還要自己想方設法地去找方式。
Orz...
小喵在此小小抱怨一下,紀錄一下~以後可以遇到可以找回記憶。
就醬子~提供給自己與網友參考~

 

 


以下是簽名:


Microsoft MVP
Visual Studio and Development Technologies
(2005~2019/6) 
topcat
Blog:http://www.dotblogs.com.tw/topcat