Why does the javascript onchange event not fire if autocomplete is on?

Question

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?

Answer 1

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.

Answer 2

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')"/>

Answer 3

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();
})

Answer 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.

Answer 5

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>

Answer 6

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.