瀏覽器的貼心有時會為開發人員帶來困擾:
相信這個畫面大家並不陌生,登入facebook、mail都會跳這個dialog;在你下次登入時,瀏覽器會自動幫你輸入帳號密碼。當你做的軟體有整合LDAP、AD、SMTP、Samba任何與帳號密碼有關的功能時,使用者會想遇到這樣的狀況嗎?
假如我根本不需要使用帳號密碼,你幫我填入我不是還要自己消掉嗎? 除此之外,在Submit後所跳出的對話盒,是另一個困擾。本篇文章會分享針對這兩個問題的治療經驗。
我撰寫此篇文章時,測試的瀏覽器分別為以下版本:
分享的方法是給大家參考,最後要使用哪種就看應用程式需求。
要一次解決以上兩個問題,就是不要使用password。目前看到唯一跨瀏覽器的方法,可以使用這個GitHub上MIT license的project: text-security;它是透過css去模擬密碼的外表,可以直接看demo。
這個做法是為了解決autocomplete的問題。原理就是將password field設定為readonly,而瀏覽器針對有值或者readonly的password不會自動填入,最後再透過onfocus將readonly屬性移除就可以正常使用:
<input type="password" readonly onfocus="this.removeAttribute('readonly');this.select(); this.selectionStart = this.selectionEnd = this.value.length;" onblur="this.setAttribute('readonly','readonly');" />在IE上如果僅移除readonly屬性,會造成點擊兩次才能夠輸入密碼的問題,必須透過再次選取與調整游標位置去讓使用者無痛;onblur是為了避免使用者按tab又觸發autocomplete的問題。最後我們有使用這方法,主要是由於我們使用Apache Wicket,這種方式比較容易做成可重複使用的元件。
這方法不推薦使用。目前我知道autocomplete=“off”可以使用於IE,但autocomplete=“nope”只能用於chrome與firefox的某些版本。
這個做法是在form的前面塞入隱藏的欄位給瀏覽器做自動完成。最早我們使用這個方法,但它有以下缺點:
<form autocomplete="off"> <input id="username" style="display:none" type="text" name="fakeusernameremembered"> <input id="password" style="display:none" type="password" name="fakepasswordremembered"> <input id="real-username" type="text" autocomplete="nope"> <input id="real-password" type="password" autocomplete="new-password"> </form>(範例程式出自於link)
這個問題除了避免使用password欄位以外,目前我沒有萬全之策。以下是我針對不同瀏覽器所觀察到的情況,版本與autocomplete部分相同:
以我們的軟體而言,最大問題是在Firefox上。這邊提供個範例給大家參考,如何做form的ajax submit,首先是html部分:
<form id="form" name="form"> <input id="user" name="user" type="text" /> <input id="passwd" name="passwd" type="password" /> <input id="btn" type="button" value="shit"/> </form>javascript部分,以JQuery為範例,我使用FormData物件來將內容轉為multipart的格式送往server:
$( document ).ready(function() { $('#btn').click(function(){ console.log('submit form'); $("#form").submit(); }); $("#form").submit(function(e){ var form = $(this); var formData = new FormData(form[0]); $.ajax({ type: "POST", url: 'shit.php', processData: false, contentType: false, data: formData, success: function(data) { console.log(data); // show response from the php script. } }); e.preventDefault(); }); });以純javascript而言,使用以上方式就可以避免在firefox上跳出remember login dialog,但是在Apache Wicket 6上就沒這麼樂觀。下圖是我們在使用Wicket Form物件,並將multiple設為true後,發ajax request後的結果:
第二個方法大概這樣做:
Wicket.Ajax.Call.prototype.submitMultipartForm = function(aContext){ var attrs = aContext.attrs; // ... do ajax request };內容實做,可以參考wicket-ajax-jquery.js內的doAjax,資料從aContext都可以拿到。
之前曾寫過類似文章,方法與前面提到的類似,本篇文章更為完整。