2016-09-03 5 views
1

このコードはFireFoxではうまく動作しますが、多数の場合、この結果はChromeやEdgeでは表示されず、コンソールにもエラーはありません。なぜこれがFireFoxで特別に機能するのか?2つのフォーマットされた大きな数字を掛け合わせるとC​​hromeに結果は表示されません

<html> 
<head> 
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js'></script>  
</head> 
<body> 

    <input type="text" name="Customers2" id="Customers2" maxlength="11" class="number" value="" placeholder="Please enter a number"/> 
    <input type="text" name="MonetarySpend" id="MonetarySpend" maxlength="11" class="number" value="" placeholder="Please enter a dollar amount"/> 
    <input type="text" disabled="disabled" name="MarketSize" id="MarketSize" maxlength="11" value=""/> 

<script>     
$(document).ready(function() 
{ 
    $("#Customers2,#MonetarySpend").on("change", function() 
    { 
     /* http://stackoverflow.com/questions/12559208/how-to-remove-comma-from-number-which-comes-dynamically-in-tpl-file */ 
     var c2 = $("#Customers2").val(); 
     c2 = c2.replace(/\,/g,''); 
     c2 = parseInt(c2,10); 

     var ms = $("#MonetarySpend").val(); 
     ms = ms.replace(/\,/g,''); 
     ms = parseInt(ms,10);       

     var MarketSize = c2 * ms; 
     $("#MarketSize").val(MarketSize); 
     $('#MarketSize').val(commaSeparateNumber(MarketSize)); 
    }); 

    $('#MarketSize').val(commaSeparateNumber($('#MarketSize').val())); 
}); 

/* http://stackoverflow.com/questions/2632359/can-jquery-add-commas-while-user-typing-numbers */ 
$('input.number').keyup(function(event) { 

    // skip for arrow keys 
    if(event.which >= 37 && event.which <= 40) return; 

    // format number 
    $(this).val(function(index, value) { 
    return value 
    .replace(/\D/g, "") 
    .replace(/\B(?=(\d{3})+(?!\d))/g, ",") 
    ; 
    }); 
});     

/* http://stackoverflow.com/questions/3883342/add-commas-to-a-number-in-jquery */    
function commaSeparateNumber(val) 
{ 
    while (/(\d+)(\d{3})/.test(val.toString())) 
    { 
     val = val.toString().replace(/(\d+)(\d{3})/, '$1'+','+'$2'); 
    } 
    return val; 
}    

</script>  
</body> 
</html> 

答えて

0

問題の程度は、数字の大きさではありません。この問題は、 'onchange'イベントがトリガされるかどうかに関係します。

https://dev.w3.org/html5/spec-preview/common-input-element-apis.html#event-input-changeを使用すると、プログラムで値を変更すると、変更イベントが手動でトリガーされることがわかります。

関連クエリはそれを動作Google Chrome change event in input is not fired if char added on keyup

あなたのjavascriptを次のように小さな追加が可能で議論されています:

$(document).ready(function() { 
 
    $("#Customers2,#MonetarySpend").on("change", function() { 
 
     /* https://stackoverflow.com/questions/12559208/how-to-remove-comma-from-number-which-comes-dynamically-in-tpl-file */ 
 
     var c2 = $("#Customers2").val(); 
 
     c2 = c2.replace(/\,/g,''); 
 
     c2 = parseInt(c2,10); 
 

 
     var ms = $("#MonetarySpend").val(); 
 
     ms = ms.replace(/\,/g,''); 
 
     ms = parseInt(ms,10);       
 

 
     var MarketSize = c2 * ms; 
 
     $("#MarketSize").val(MarketSize); 
 
     $('#MarketSize').val(commaSeparateNumber(MarketSize)); 
 
    }); 
 

 
    $("#Customers2,#MonetarySpend").on("blur", function() { 
 
    \t $(this).change(); 
 
    }); 
 
    
 
    $('#MarketSize').val(commaSeparateNumber($('#MarketSize').val())); 
 
}); 
 

 
/* https://stackoverflow.com/questions/2632359/can-jquery-add-commas-while-user-typing-numbers */ 
 
$('input.number').keyup(function(event) { 
 

 
    // skip for arrow keys 
 
    if(event.which >= 37 && event.which <= 40) return; 
 

 
    // format number 
 
    $(this).val(function(index, value) { 
 
    return value 
 
    .replace(/\D/g, "") 
 
    .replace(/\B(?=(\d{3})+(?!\d))/g, ",") 
 
    ; 
 
    }); 
 
});     
 

 
/* https://stackoverflow.com/questions/3883342/add-commas-to-a-number-in-jquery */    
 
function commaSeparateNumber(val) { 
 
    while (/(\d+)(\d{3})/.test(val.toString())) { 
 
     val = val.toString().replace(/(\d+)(\d{3})/, '$1'+','+'$2'); 
 
    } 
 
    return val; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" name="Customers2" id="Customers2" maxlength="11" class="number" value="" placeholder="Please enter a number"/> 
 
    <input type="text" name="MonetarySpend" id="MonetarySpend" maxlength="11" class="number" value="" placeholder="Please enter a dollar amount"/> 
 
    <input type="text" disabled="disabled" name="MarketSize" id="MarketSize" maxlength="11" value=""/>