CODEWITHSUNDEEP
javascriptjquerycross-browser
Snoopy
Snoopy

Reputation: 37

JQuery Code works in Firefox, Opera but not working in Chrome and IE

I have the following code which works in Firefox-20 and Opera but not in Chrome-26 or IE-10. The keyup functions adds Indian commas to the amounts.

$(document).ready(function() {
    $("#readyArea").on('change', function() {
        $("#underConstArea").val($(this).val()).trigger('change');
    });

$('.comma').on('keyup', this, function commaFormatted(){
        var delimiter = ","; // replace comma if desired
        var amount = $(this).val().replace(/\,/g,'');
        var a = amount.split('.',2);
        var d = a[1];
        var i = parseInt(a[0],10);
        if(isNaN(i)) { return ''; }
        var minus = '';
        if(i < 0) { minus = '-'; }
        i = Math.abs(i);
        var n = new String(i);
        var a = [];
        var cnt=0;
        while(n.length > 2)
        {
            if(cnt == 0)
            {
                var nn = n.substr(n.length-3);
                n = n.substr(0,n.length-3);
                cnt++;
            }
            else
            {
                var nn = n.substr(n.length-2);
                n = n.substr(0,n.length-2);
            }
            a.unshift(nn);
        }
        if(n.length > 0)
        {
            a.unshift(n);
        }
        n = a.join(delimiter);
        amount = n;
        amount = minus + amount;
        $(this).val(amount);
    });
});

Here is the JSFiddle link. (As I said if I open this link in Firefox or Opera the js works but not in Chrome or IE). There are no js errors on the console either. Do I need to do something specific for Chrome and IE?

EDIT

Just to clarify, it is the onChange event that is not firing in Chrome and IE. The same is firing in Firefox and Opera.

Upvotes: 1

Views: 439

Answers (1)

Scott Mermelstein
Scott Mermelstein

Reputation: 15397

I tested on Chrome, and the commas did fine, but I never saw the underConstArea update, while I did see it do so on Firefox after leaving the textbox.

I'm not sure what is happening there, but I have several ways of fixing it.

First, it seems that whether $("#readyArea").on('change') fires is browser dependent. I don't know why, but it seems that Chrome doesn't throw a change event when you're changing the code. Maybe it's trying to avoid an infinite loop of changes; I'm not really sure.

If you're happy with the underConstArea only updating when the number is done (as it behaves in firefox), you can do so on focusout instead of on change. I changed your top lines to 

$("#readyArea").on('focusout', function() {
    $("#underConstArea").val($(this).val());
});

and it worked fine for me in Chrome and Firefox. Here's an updated fiddle.

Alternatively, if you want it to update every time the user types, just update underConstArea within your commaFormatted function. Just add 

$("#underConstArea").val(amount);

at the bottom of your function. And the link to the second option I offered. Note that I removed any event catching on #readyArea.

Upvotes: 1

Related Questions