Javascript输入keyup第一个值=“-”不是NaN

Question

这里我想填充以value "-" 开头的输入值，如果起始值是数字，然后将最后一个"-" 添加到值，则它可以工作，但这里我希望input value "-" 在开始时而不是"NaN" 在时间@ 987654325@

这是我的代码示例：

    $(document).on("keyup change", ".cll_debit", function() {
        var sum = 0;
        $(".cll_debit").each(function(){
            sum += +$(this).val().replace(/\./g, "");
        });

        $("#tl_debit").val(sum.toLocaleString("id-ID"));
    });
  
  var $form = $( ".form" );
    var $input = $form.find( "input" );
  
  $input.on( "keyup", function( event ) {
        var $this = $( this );  
        var input = $this.val();
        var input = input.replace(/[\/a-z\/A-Z\s\._\=\`]+/g, "");
        
        input = input ? parseInt( input, 10 ) : 0;
        $this.val( function() {
            return ( input === 0 ) ? "" : input.toLocaleString("id-ID");
        } );
    } );
    

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="form">
  <input type="text" class="cll_debit" autocomplete="off" value="">
  <input type="text" class="cll_debit" autocomplete="off" value="">
  <br><br>
  <input type="text" id="tl_debit" value="0" readonly>
</div>

在这里我找到了一种没有 toLocaleString 的方法，但是在 input value="-" 上它不起作用

$(document).on("keyup change", ".cll_debit", function() {
    var sum = 0;
    $(".cll_debit").each(function(){
        sum += +$(this).val().replace(/\./g, "");
    });

    $("#tl_debit").val(sum.toLocaleString("id-ID"));
});

number_format = function (number, decimals, dec_point, thousands_sep) {
        number = number.toFixed(decimals);

        var nstr = number.toString();
        nstr += '';
        x = nstr.split('.');
        x1 = x[0];
        x2 = x.length > 1 ? dec_point + x[1] : '';
  var rgx = /(\d+)(\d{3})/;

        while (rgx.test(x1))
            x1 = x1.replace(rgx, '$1' + thousands_sep + '$2');

        return x1 + x2;
    }

var $form = $( ".form" );
var $input = $form.find( "input" );

$input.on( "keyup", function( event ) {
    var $this = $( this );  
    var input = $this.val();
    var input = input.replace(/\D/g, "");

    input = input ? parseInt( input, 10 ) : 0;
    $this.val( function() {
        return number_format(input, '', '.', '.');
    } );
} );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="form">
  <input type="text" class="cll_debit" autocomplete="off" value="">
  <input type="text" class="cll_debit" autocomplete="off" value="">
  <br><br>
  <input type="text" id="tl_debit" value="0" readonly>
</div>

在这里我添加了一个与 toLocaleString 无关的新函数，但在 input value="-" 上也无法正常工作

Answer 1

你可以试试这个：

$(document).on("keyup change", ".cll_debit", function() {
    var sum = 0;
    $(".cll_debit").each(function(){
        sum += +$(this).val().replace(/\./g, "");
    });

    $("#tl_debit").val(sum.toLocaleString("id-ID"));
});

var $form = $( ".form" );
var $input = $form.find( "input" );

$input.on( "keyup", function( event ) {
    var $this = $( this );  
    var input = $this.val();
    var input = input.replace(/[\/a-z\/A-Z\s\._\=\`]+/g, "");

    if($(this).val().length > 1){
      input = input ? parseInt( input, 10 ) : 0;
      $this.val( function() {
          return ( input === 0 ) ? "" : input.toLocaleString("id-ID");
      } );
    }else{ }
} );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="form">
  <input type="text" class="cll_debit" autocomplete="off" value="">
  <input type="text" class="cll_debit" autocomplete="off" value="">
  <br><br>
  <input type="text" id="tl_debit" value="0" readonly>
</div>

Answer 2

将输入类型从text 更改为number，之后您可以跳过所有值正则表达式检查。之后减号也将正常工作，并且代码会更简洁。
如果您需要更改语言环境，请传递语言属性id-ID 或navigator.language 的值。

    $(document).on("keyup change", ".cll_debit", function() {
        var sum = 0;
        $(".cll_debit").each(function(){
            sum += +$(this).val();
        });

        $("#tl_debit").val(sum.toLocaleString("id-ID"));
    });
  
  
   

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="form">
  <input type="number" class="cll_debit" autocomplete="off" lang="id-ID">
  <input type="number" class="cll_debit" autocomplete="off" lang="id-ID">
  <br><br>
  <input type="text" id="tl_debit" value="0" readonly>
</div>