Question

此代码在FireFox中运行良好，但对于大量数据，此结果不会显示在Chrome或Edge中 - 并且控制台中没有错误。知道为什么这个在FireFox中有效吗？

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

Answer 1

问题不在于数字有多大。问题与“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() {
    	$(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=""/>

乘以2个格式化的大数字表示Chrome中没有结果

1 个答案: