30

I have a textbox with an onchange event. Why does this event not fire when the user uses the autocomplete feature to populate the textbox?

I am working with Internet Explorer. Is there a standard and relatively simple solution to workaround this problem, without me having to disable the autocomplete feature?

6 Answers 6

18

Last time I had that issue, I ended up using the onpropertychange event for Internet Explorer instead. I read about that here on MSDN: it is the recommended way to get around it.

3
  • but it seems to fire everytime the user presses a key. am i doing something wrong here ?
    – Preets
    Dec 5, 2008 at 9:32
  • 1
    No thats unfortunately how it works. But i just found this resource, which seems to address the issue in a nice way: jehiah.cz/archive/onchange-and-autocomplete
    – Tom Jelen
    Dec 5, 2008 at 9:41
  • 2
    Note: onpropertychange no longer seems to work reliably in IE9, at least in my testing. Nov 23, 2011 at 21:46
14

I've encountered this annoying feature before and my solution at the time was to use the onfocus event to record the current value of the text box, and then use the onblur event to check whether the current value now matches the value saved during onfocus. For example

<input type="text" name="txtTest" value="" onfocus="this.originalvalue=this.value" onblur="if (this.value != this.originalvalue) alert('Test has changed')"/>
3
  • 2
    This was happening to me in the newest version of Chrome, so clearly it isn't an IE specific thing. The onblur fixed my issue.
    – DanO
    Sep 20, 2011 at 0:01
  • onblur also fixed my issue, and worked in IE 7,8,9 and 9 comp. Thanks
    – Gaʀʀʏ
    May 18, 2012 at 16:17
  • 2
    This worked great for me - here's my jquerified translation: $("#my-field").focus(function(){this.originalvalue=this.value}).blur(function(){if (this.value != this.originalvalue) alert('changed')}); Nov 7, 2012 at 10:02
8

Building on Tim C's answer, here is the simple jquery I came up with to handle this for all text boxes on a page:

$("input[type=text]").bind("focus change",function(){
    this.previousvalue = this.value;
}).blur(function(){
    if (this.previousvalue != this.value){
        $(this).change();
    }
})

If you don't care about onchange firing multiple times, you can make it simpler:

$("input[type=text]").blur(function(){
    $(this).change();
})
4

I just found that using jQuery 1.4 to set change event can solve this issue. It seems the easiest solution to this issue if you are already familiar with jQuery.

1
  • 1
    I'm using jquery 1.7.1 and choosing the autocomplete entry with the tab key wasn't firing the change event. I used Tim C's solution. Nov 7, 2012 at 10:05
2

I just turn Autocomplete off for the text boxes I need to fire a text change event

'Turn off Auto complete 
'(it needs to fire the text change event)
 txtYourTextBox.Attributes.Add("AutoComplete", "off")

Just put that in the page load.

Alternately, you can add the attribute to your markup on the input element or the entire form:

<input type=text autocomplete=off>

or

<form autocomplete=off>
3
  • 1
    That's not really a solution. Autocomplete is useful for users. The question is about how to work with it, not to disable it. Dec 13, 2011 at 14:44
  • 1
    I love it! Force browser makers to give us better support for these fluff features they want to add, so we can work with them... otherwise we just disable them!
    – eselk
    Dec 12, 2012 at 21:46
  • 1
    This is a solution because it turns off a feature that isn't working. I have a form that live validates every field, and when they are autofilled, they still show in error. I'd rather not use autofill, then have a broken form. It would be nice if browser vendors would raise an event when autofill happens. Aug 28, 2013 at 3:48
1

I found that the following jQuery (v1.10+) JavaScript does work in the case of text being auto-completed for HTML text input fields. This was tested to work reliably at least in Safari 6.1.1 on Mac OS X 10.8.5, but should work in other compliant browsers also:

$("input:text[id=text_field_id]").bind("focus change keyup blur", function(event) {
// handle text change here...
});

It seemed the addition of the blur event handler was the key to making this work, although the other event handlers help ensure that the event handler is called any time the text changes, whether due to an edit or new input by the browser's auto-complete feature.

Simply replace the "input:text[id=text_field_id]" code above with the relevant selector for your desired text input field, or if using the id attribute to refer to your field, replace text_field_id with your text field's id attribute value.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.