CODE-鎖定有掛onchange事件的欄位停用自動完成

上回提過因使用IE自動完成造成onchange事件不被觸發的問題,著實帶來一些困擾,不少User抱怨系統掛在onchange事件的欄位連動功能失效。雖然User漸漸都已學會在這些欄位使用手工輸入,不要依賴IE自動完成帶入結果就可以避開問題,抱怨日少。不過我想從網頁設定上去停用autocomplete還是比較根本的解決之道。

當然,我們可以抱著寧可錯殺一百,不可錯放一個的精神來個$("input:text").attr("autocomplete", "off"),把網頁上所有<input type='text'>的自動完成功能全都閹掉,一了百了。不過,我習慣處理得細膩一點,將這個不得已措施的範圍縮小到受影響的欄位上,換句話說,只有掛了onchange事件的<input type='text'>才是要撲殺的對象。

要怎麼偵錯欄位是否有掛onchange事件? 想起上回剛好玩過列舉元素已掛載的jQuery事件的小把戲,這回把它融合進來,就做出了這個"標靶治療式"的autocomplete屬性停用Plugin。

以下的程式範例可以讓大家拿去Mini jQuery Lab實地玩一下。

//針對有掛onchange的<input type="text">設定autocomplete="off"
//參考: http://tinyurl.com/yzwp3lt
//限制: 只對執行當下已經掛載onchange事件者有效(不包含.live()掛載者)
$.fn.disableAutoCompleteForChange = function(force) {
    //過濾只留下<input type='text'>
    return this.filter(":text").each(function() {
        //篩選有掛change事件者, 參考: http://tinyurl.com/yka6x8g
        var evts = $.data(this, "events");
        if (force || evts && evts["change"] || this.onchange != undefined)
            $(this).attr("autocomplete", "off");
            //.val("SET"); //可加上這段測試是否被設定
    });
}
//加入三個<input>進行測試, T2用jQuery掛onchange, T3直接宣告onchange
$("body").append("<input id='T1' /><input id='T2' />")
.append("<input id='T3' onchange='alert(3);' />");
$("#T2").change(function() { alert("2"); });
$("input").disableAutoCompleteForChange();

注意:

  1. .disableAutoCompleteForChange()的呼叫時機要在onchange掛上去後
  2. 對使用.live()掛載的onchange無效
  3. 另外多加對以<input onchange="..." />方式掛上事件的偵測
  4. .disableAutoCompleteForChange(true)時可不管有無onchange,一律停用
[2010-03-08補充] 測試發現使用jQuery 1.4+掛載change()事件即可解決此問題
歡迎推文分享:
Published 05 March 2010 03:56 PM 由 Jeffrey
Filed under: , ,
Views: 9,875



意見

# 91 said on 07 March, 2010 12:21 AM

酷!

不過小的那邊要說服使用者,

為什麼有一些有自動完成功能,有一些沒有,

就比較難跟使用者說明了...

對他們來說,似乎很難懂啥叫onchange  :P

# Jeffrey said on 08 March, 2010 08:50 AM

to 91, 意外發現,這問題被jQuery 1.4秒殺了。(http://bit.ly/aLOD7j)

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<March 2010>
SunMonTueWedThuFriSat
28123456
78910111213
14151617181920
21222324252627
28293031123
45678910
 
RSS
創用 CC 授權條款
【廣告】
twMVC
最新回應

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication