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

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?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

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

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

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

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

Method 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>

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


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x