onchange and IE’s AutoComplete don’t mix

posted September 29th 2005 at 1923 EDT in All, HTML, IE, Javascript

When you use IE's AutoComplete feature to fill in form information javascript onchange event's don't fire. Isn't that annoying?

You don't have to take my word for it though. Check it out on this example form

Things work fine with firefox's AutoComplete, but you are on your own with IE.

Update below is a behaviour script workaround using behaviour.js and prototype.js, and a page demoing the fix


var onchangeFix ={
   'input' : function(el){
        if (typeof(document.media)=='string' && el.getAttribute("type").toLowerCase() == "text"){ // ie domcheck and onchange
           el._onchangeFix = {};
           if (el.onchange){
              el._onchangeFix_onchange = el.onchange;
              el.onchange = function(){this._value = this.value;this._onchangeFix_onchange(this);}
           }
           else
              el.onchange = function(){this._value = this.value;}
           if (el.onclick){
              el._onchangeFix_onclick = el.onclick;
              el.onclick = function(){this._value = this.value;this._onchangeFix_onclick(this);}
           }
           else
              el.onclick = function(){this._value = this.value;}
           if (el.onblur){
              el._onchangeFix_onblur = el.onblur;
              el.onblur = function(){if (this._value != this.value){this.onchange();}el._onchangeFix_onblur(this);}
           }
           else
              el.onblur = function(){if (this._value != this.value){this.onchange();}}
        }
   }
};

Behaviour.register(onchangeFix);
 

Note: because this behaviour script is nice and preserves existing onchange, onblur and onclick events; dont call Behaviour.apply(); because it will apply this fix twice (and so on and so forth). That'll do a nice job of making the browser slow!

8 Responses

  1. #1 jehiah
    4 years, 4 months ago

    How nice microsoft even documents this “feature” in their documentation for autocomplete

    http://msdn.microsoft.com/workshop/author/forms/autocomplete_ovr.asp

    They suggest using onpropertychange instead of onchange

  2. #2 Tim Jordan
    4 years ago

    I used the onPropertyChange event (remember to always use correct text case in js!!). It worked well for me.

    I have text input that require numerics only. As I type in the numbers, a running subtotal updates on the page (using some simple DHTML).

    So what I have on the input boxes is an onKeyUp and an onPropertyChange firing the same function which checks for valid numbers and updates the running subtotal accordingly.

    ex.:

    Thanks for the tip Jehiah.

    • Tim
  3. #3 mojoBook
    3 years, 12 months ago

    I found a cool tool can instead of IE’s autocomplete function, more details see: http://www.jjsoft-studio.com

  4. #4 Bill
    3 years, 8 months ago

    The onpropertychange event fires after each character is typed into the box. This is unusable for me. I am trying to use ajax to check the vailidity of the data. Not very useful to have to go to the server 30 times as they are typing.

  5. #5 Derek
    3 years, 7 months ago

    Thanks for the tip. This was caught right before a go-live. Saved my butt.

  6. #6 kris
    2 years, 7 months ago

    http://krisgale.com/three-things-a-web-developer-might-do-to-force-feed-their-applications-to-internet-explorer-7/

    read the above for an example of using ugly-but-functional special purpose html comments to selectively use onpropertychange only for ie and onchange for everyone else.

  7. #7 Andrew
    2 years, 5 months ago

    Have a try at the above “fix” using Firefox (2.0.0.7)’s autocomplete… nothing… bumpkus…

    I’ve had problems with firefox + autocomplete + handlers for awhile now…

  8. #8 jehiah
    2 years, 4 months ago

    As it turns out my fix doesn’t work in firefox (as the above poster notices). In firefox i’ve decided for the moment just to turn of autocomplete by adding autocomplete="off" to the form tag.