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?

Preets
  • 6,792
  • 12
  • 37
  • 38

6 Answers6

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.

Jeroen
  • 60,696
  • 40
  • 206
  • 339
Tom Jelen
  • 2,559
  • 1
  • 24
  • 23
  • but it seems to fire everytime the user presses a key. am i doing something wrong here ? – Preets Dec 05 '08 at 09:32
  • 1
    No thats unfortunately how it works. But i just found this resource, which seems to address the issue in a nice way: http://jehiah.cz/archive/onchange-and-autocomplete – Tom Jelen Dec 05 '08 at 09:41
  • 2
    Note: onpropertychange no longer seems to work reliably in IE9, at least in my testing. – David Hammond Nov 23 '11 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')"/>
Tim C
  • 70,053
  • 14
  • 74
  • 93
  • 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 '11 at 00:01
  • onblur also fixed my issue, and worked in IE 7,8,9 and 9 comp. Thanks – Gaʀʀʏ May 18 '12 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')});` – Max Williams Nov 07 '12 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();
})
David Hammond
  • 3,286
  • 1
  • 24
  • 18
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.

Darkthread
  • 4,109
  • 5
  • 33
  • 137
  • 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. – Max Williams Nov 07 '12 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>
Lance Fisher
  • 25,684
  • 22
  • 96
  • 122
Big Briyan
  • 37
  • 1
  • 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. – Nathan Long Dec 13 '11 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 '12 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. – Lance Fisher Aug 28 '13 at 03: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.

bluebinary
  • 1,026
  • 14
  • 17