Search code examples
jquerygoogle-chromejquery-eventskeyup

Google Chrome change event in input is not fired if char added on keyup

$('input#not-gonna-work').bind({
    keyup: function(){
        console.log('Typed a key');
        $(this).val($(this).val() + '.');// try with any other char
    },
    change: function(){
       console.log('I\'m a changed input');
    }
});

I staged this bug in this simplified jsfiddle example. My problem related to this bug is that I have a financial app that I'm building and I need to display a "Save changes" button if input data is changed. Since I need to insert thousand separator immediately on keyup (if needed) this bug really annoys me and breakes that functionality.

To reproduce it go to jsfiddle example, open console in chrome type anything in first input, keyup event will be properly fired, than un-focus input with tab or clicking outside of it and change event won't be fired. Do the same with other input and change will be fired.

I tested this in Firefox and it works as expected.

Version of Chromium that I'm using is 14.0.835.202 (Developer Build 103287 Linux) Ubuntu 11.10

and

Tried with Google Chrome 15.0.874.106 freshly installed straight from Chrome website.

I could insert separators on change event, but since users will be entering lots of 7+ digits numbers it would much better UX to have separators inserted as they type.

Solution

  • I tried it in IE9 and it has the same behavior as Chrome.

    I don't think it's a bug.

    Using .val(value) on an HTML element will reset the "manually changed" flag and thus no change event will occur (because the user doesn't change anything manually AFTER the val() operation).