差異處
這裏顯示兩個版本的差異處。
| Both sides previous revision 前次修改 下次修改 | 前次修改 | ||
|
java:web:wicket:dont_autocomplete [2018/11/09 18:11] tony [Fake blank input field] |
java:web:wicket:dont_autocomplete [2023/06/25 09:48] (目前版本) |
||
|---|---|---|---|
| 行 1: | 行 1: | ||
| + | {{tag>wicket autocomplete password}} | ||
| ====== Wicket - Don't autocomplete ====== | ====== Wicket - Don't autocomplete ====== | ||
| ===== Problem ===== | ===== Problem ===== | ||
| 行 10: | 行 11: | ||
| ===== How to prevent the autocomplete? ===== | ===== How to prevent the autocomplete? ===== | ||
| 我撰寫此篇文章時，測試的瀏覽器分別為以下版本: | 我撰寫此篇文章時，測試的瀏覽器分別為以下版本: | ||
| - | * chrome: 70.0.3538.77 | + | * Chrome: 70.0.3538.77 |
| - | * firefox: 63.0.1 | + | * Firefox: 63.0.1 |
| - | * ie: 11.0.9600.19129 | + | * IE: 11.0.9600.19129 |
| 分享的方法是給大家參考，最後要使用哪種就看應用程式需求。 | 分享的方法是給大家參考，最後要使用哪種就看應用程式需求。 | ||
| ==== Don't use type="password" ==== | ==== Don't use type="password" ==== | ||
| 行 20: | 行 21: | ||
| <code html> | <code html> | ||
| <input type="password" readonly | <input type="password" readonly | ||
| - | onfocus="this.removeAttribute('readonly');this.select(); this.selectionStart = this.selectionEnd = this.value.length;"/> | + | onfocus="this.removeAttribute('readonly');this.select(); this.selectionStart = this.selectionEnd = this.value.length;" |
| + | onblur="this.setAttribute('readonly','readonly');" | ||
| + | /> | ||
| </code> | </code> | ||
| - | 在IE上如果僅移除readonly屬性，會造成點擊兩次才能夠輸入密碼的問題；必須透過再次選取與調整游標位置去讓使用者無痛。最後我們有使用這方法，主要是由於我們使用Apache Wicket，這種方式比較容易做成可重複使用的元件。 | + | 在IE上如果僅移除readonly屬性，會造成點擊兩次才能夠輸入密碼的問題，必須透過再次選取與調整游標位置去讓使用者無痛；onblur是為了避免使用者按tab又觸發autocomplete的問題。最後我們有使用這方法，主要是由於我們使用Apache Wicket，這種方式比較容易做成可重複使用的元件。 |
| ==== Apply autocomplete="nope" or autocomplete="off" ==== | ==== Apply autocomplete="nope" or autocomplete="off" ==== | ||
| 這方法不推薦使用。目前我知道autocomplete="off"可以使用於IE，但autocomplete="nope"只能用於chrome與firefox的某些版本。 | 這方法不推薦使用。目前我知道autocomplete="off"可以使用於IE，但autocomplete="nope"只能用於chrome與firefox的某些版本。 | ||
| 行 83: | 行 86: | ||
| 以純javascript而言，使用以上方式就可以避免在firefox上跳出remember login dialog，但是在Apache Wicket 6上就沒這麼樂觀。下圖是我們在使用Wicket Form物件，並將multiple設為true後，發ajax request後的結果:\\ | 以純javascript而言，使用以上方式就可以避免在firefox上跳出remember login dialog，但是在Apache Wicket 6上就沒這麼樂觀。下圖是我們在使用Wicket Form物件，並將multiple設為true後，發ajax request後的結果:\\ | ||
| {{:java:web:wicket:wicket_submit_multiple_form.png|}}\\ | {{:java:web:wicket:wicket_submit_multiple_form.png|}}\\ | ||
| - | 可以發現它並不是一個ajax request；追根究底到wicket-ajax-jquery.js中的submitMultipartForm，可以發現Wicket是使用iframe來模擬如ajax的request。從Wicket的[[https://github.com/apache/wicket/pull/255|Pull Request]]中可以得知，Wicket為了要相容於IE7~IE9，因此在舊版本的Wicket並沒使用FormData。因此，如果要解決這個問題，有兩個方式: | + | 可以發現它並不是一個ajax request；追根究底到wicket-ajax-jquery.js中的submitMultipartForm，可以發現Wicket是使用iframe來模擬如ajax的request。從Wicket的[[https://github.com/apache/wicket/pull/255|Pull Request]]中可以得知，Wicket為了要相容於IE7~IE9，在舊版本的Wicket並沒使用FormData。如果要解決這個問題，有兩個方式: |
| * 更新到Wicket8，它在[WICKET-6517]中使用真的Ajax取代了iframe。 | * 更新到Wicket8，它在[WICKET-6517]中使用真的Ajax取代了iframe。 | ||
| * override submitMultipartForm。 | * override submitMultipartForm。 | ||
| 行 96: | 行 99: | ||
| \\ | \\ | ||
| 如果真的要完全解決這問題，請別使用password。 | 如果真的要完全解決這問題，請別使用password。 | ||
| + | ===== 後記 ===== | ||
| + | 之前曾寫過類似文章，方法與前面提到的類似，本篇文章更為完整。 | ||
| + | * [[java:web:browserAutocomplete|Autocompletion problem on Firefox or Chrome]] | ||
| ===== Reference ===== | ===== Reference ===== | ||
| * [[https://jsfiddle.net/449Lamue/6/|demo - 使用text模擬password]] | * [[https://jsfiddle.net/449Lamue/6/|demo - 使用text模擬password]] | ||
