Textbox change event not firing in chrome

Question

I have a textbox

<input name="tx1" size="10" type="text" id="tx1" class="sample dynamic format" maxlength="10" />

Textbox change and keyup events are bind to two different functions.

$('.sample.dynamic').change(myJsFunction);


$('.format').keyup(function (e) {
        formatfn(this, e);

    });

This is my formatfn:

function formatfn(sValue, e) {

//Do some formatting

$(sValue).val(newVal);

return newVal;

}

Both events working fine in IE and firefox but in chrome only keyup function is working and change event is not fired.

if i comment the below line in formatfn then change event start firing in chrome as well.

//$(sValue).val(newVal);

But i can not comment this line as i need to apply the formatting on every keypress.

I have looked two similar questions here and here but couldn't find the answer.

Update : Formatfn is doing various formatting stuff, but just to give you idea about newval variable i am adding some related code here:

var newVal = $(sValue).val();

if (newVal != "")
        newVal = parseInt(RemoveCommas(newVal), 10).toString();

    var sRegExp = new RegExp('(-?[0-9]+)([0-9]{3})');

    while (sRegExp.test(newVal)) {
        newVal = newVal.replace(sRegExp, '$1,$2');

Are you looking for a change event on each key press? Change will only fire when the field is unfocused. — user229044, Oct 25 '12 at 22:13
no, i like to call "formatfn" on each key press and "myJsFunction" on onchnage event. — user1533453, Oct 25 '12 at 22:16
You are not posting all the code since you are referencing `newVal`, which is not defined anywhere and would cause ReferenceError in any browser — Esailija, Oct 25 '12 at 22:17
Also, is there a reason you're setting `.val(newVal)`, but returning `newval` - notice the case difference? — kmfk, Oct 25 '12 at 22:20
@user1533453 btw, have you looked at the google chrome developer console for javascript errors? — Esailija, Oct 25 '12 at 22:25
@Jlange: user enters the amount in this text box and on every key press we have to format the amount e.g. putting the comma at right place like 1,000 or 10,000 and once user has entered the amount and go out of that textbox then we are calling a service to do some calculation based on that amount. — user1533453, Oct 25 '12 at 22:44
The reason why the change event isn't firing is because you are setting a value programmatically. I would suggest adding your keyup processing to the change event. — RestingRobot, Oct 25 '12 at 22:48
Is there a reason why you need commas at all? I mean why would you do any sort of calculation with commas? I could see if you were trying to ensure that only numbers where present, but that could easily be done in the change function. — RestingRobot, Oct 25 '12 at 22:51
@Jlange: Yes we need commas :-) because business want to see amount in commas and before doing calculation we are removing commas. — user1533453, Oct 25 '12 at 23:06

score 4 · Accepted Answer · answered Oct 25 '12 at 22:51

4

You could always roll your own change function by using blur:

$('.sample.dynamic').data('last','').on('blur', function() {
    var last = $(this).data('last');
    if (this.value!=''&&this.value!=last) myJsFunction();
    $(this).data('last', this.value);
});

answered Oct 25 '12 at 22:51

adeneo

312,895
29
395
388

Thanks for this workaround, but i am still looking for reason why my code works in IE and Firefox but not in chrome. – user1533453 Oct 25 '12 at 23:04
I really don't know? There are some differences in how webkit handles the change event, checkboxes are a good example of that, but I've never had issues with textboxes that I can remember! – adeneo Oct 25 '12 at 23:13

score 2 · Answer 2 · answered May 30 '14 at 17:39

Agree that this aligns to existing reported bugs on Chromium dev site related to onchange event not firing when value is changed programatically. These have been confirmed as regression/bugs in r36 and r37 (canary). Recommend checking your version in the about Google Chrome menu item.

keyup: https://code.google.com/p/chromium/issues/detail?id=92492

change: https://code.google.com/p/chromium/issues/detail?id=378871

A simple workaround may to have your handler execute on blur as opposed to change, which avoids the failing onchange event as noted in prior answer. Another example would be to explicitly trigger the change event on blur.

$('.sample.dynamic').on("blur", function(e){ 
     $(this).change();
});

score 0 · Answer 3 · answered Jan 10 '14 at 11:18

0

Actually, there's a bug on Google Chrome that causes the 'change' event to not fire if something has been changed by the 'keyup' event:

https://code.google.com/p/chromium/issues/detail?id=92492

The issue seems to be open since May 2, 2013.

answered Jan 10 '14 at 11:18

Haroldo_OK

6,612
3
43
80

Textbox change event not firing in chrome

3 Answers3