jQuery 1.4 Solved The OnChange Event Issue of IE AutoComplete

IE's AutoComplete feature doesn't trigger onchange event is a well-known "by-design" behaviour:

Using AutoComplete in HTML Forms
To determine when a user updates the content of a field from the AutoComplete dialog box, use the onpropertychange event, rather than the onchange event, because the onchange event does not fire.

I have ever found some fixes (example 1, 2) developed by community before. Today, when I managed to put them into my project, I found something interesting.

As using jQuery 1.4+, if I set change() event on a <input type="text" />, it will be triggered as well as the event declared by onchange="..." when IE AutoComplete.  In the other word, jQuery 1.4 solved the "onchange not triggered" issue of IE AutoComplete.

After tracing the code roughly, I found jQuery uses some new mechanism: beforeactive event to store the original value in .data("_chage_data"), compares it with current value in focusout event, if not equal, then trigger the onchange event...  I guess that's why it can detect the value change when using IE AutoComplete.

So, using jQuery 1.4+, you can solved the well-known "No OnChange Event When IE AutoComplete" issue easily!

Here is my simple test case.  When jQuery 1.3.2 is included, no change event will be fired when using IE AutoComplete to fill t1, t2 value.   After changing the link to jQuery 1.4.2, you will find AutoComplete on t1 can trigger both "T1 JS change" and "T1 jQuery change" now.

<%@ Page Language="C#" AutoEventWireup="true" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type='text/javascript' 
src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js'></script>
<!--  <script type='text/javascript' 
src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js'></script> -->
    <script type="text/javascript">
        function output(msg) {
            var disp = document.getElementById("disp");
            disp.innerHTML += "<li>" + msg;
        }
        $(function() {
            //if you set change event on #t1 with jQuery 1.4.2,
            //the onchange event will be triggered when using AutoComplete
            $("#t1").change(function() {
                output("T1 jQuery change");
            });
        });
    </script>
</head>
<body>
<form method="post">
T1: <input type="text" id="t1" name="t1" onchange="output('T1 JS change');"/><br />
T2: <input type="text" id="t2" name="t2" onchange="output('T2 JS change');" /><br />
<input type="submit" value="Submit" />
</form>
<div id="disp"></div>
</body>
</html>

【中文摘要】

上回試著要用autocomplete="off"法解決IE自動完成時onchange事件不會被觸發的老問題,不過如同91在回饋裡所言--要關閉使用者慣用的自動完成功能,就得向User解釋這個難以啟齒的技術鳥問題。萬一不幸遇上"角頭級"的使用者,哪可能耐著性子聽你說什麼IE自動完成、onchange這些鬼東西,只怕會換來一句--"onchange是三小,恁爸只聽過回家吃自己,沒聽過onchange啦!"... 想到這個畫面,我忽然不寒而慄,決定花時間研究一下怎麼讓AutoComplete也觸發change事件。

開了個小專案寫了jQuery做測試,卻發現一件有趣的事。AutoComplete竟會觸發onchange事件~~~ 是我眼花了還是腦筋不清楚? 明明上回驗證過,像鐵一般的事實這回怎麼來了個急轉彎? 在做了一堆測試比對後,總算釐清一件事實:

使用jQuery 1.4設定<input type="text">的change()事件後,使用IE AutoComplete也會觸發onchange事件!!

我做了一個簡單的測試案例(程式碼在上方)來驗證這點: 首先使用jQuery-1.3.2,用IE自動完成填入t1, t2的資料,並不會觸發onchange事件;改用jQuery-1.4.2後,再以自動完成為t1, t2填入資料, 這回有加掛jQuery chnage()事件的t1會觸發用jQuery及用onchange="..."宣告的事件,而t2則不會。

粗略地追了一下程式碼,發現jQuery-1.4在change事件觸發機制上做了改良: 在beforeactive事件時會將原值存在.data("_chage_data")、在focusout事件中會用它跟現值比對,不一致時則觸發change事件。這跟我原本想出的解法差不多,而jQuery在核心中已實踐了類似的邏輯,應該就是無形中修好"AutoComplete不觸發OnChange事件"問題的原因。

總之,不費吹灰之力就修好這個惱人的問題,有賺到的感覺,哈!!

歡迎推文分享:
Published 08 March 2010 11:36 PM 由 Jeffrey
Filed under: ,



意見

# demo said on 08 March, 2010 08:53 AM

真的是賺到,自動完成我不怕你啦!!

# 91 said on 08 March, 2010 04:52 PM

真是太棒了 :D

# jain said on 08 March, 2010 05:42 PM

感恩,本來打算照您的例子硬寫了~~~

# jain said on 17 March, 2010 07:24 AM

黑暗大小,目前我們在實作jquery時有問題請教一下:

在「gridview」中加入「checkbox」,是否有方法在點選「checkbox 」時就得知該列的某欄資料?

# jain said on 17 March, 2010 07:29 AM

抱歉,手誤,打錯版主名稱~~~

# Jeffrey said on 17 March, 2010 10:08 AM

to jain, 某欄的資料如果有顯示在<TD>中,可以用$(this).closest("tr").children("td:eq(n)").text()的方式取得;若要參照的欄位值沒有呈現在UI上的,我習慣的做法是設法把它變成tr的Attribute,或是一樣用<td>放置欄位值,再用CSS把它們藏起來。

你的看法呢?

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

5 + 3 =

搜尋

Go

<March 2010>
SunMonTueWedThuFriSat
28123456
78910111213
14151617181920
21222324252627
28293031123
45678910
 
RSS
【工商服務】
OrcsWeb: Windows Server Hosting
twMVC
最新回應

Tags 分類檢視
關於作者

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

文章典藏
其他功能

這個部落格


Syndication