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

Question

这里我想填充以 value "-" 开头的输入值，如果起始值为数字，然后将最后一个 "-" 添加到值，它会起作用，但在这里我想要 input value "-" 在开始而不是 "NaN" 在时间 input "-"

这是我的代码示例：

    $(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, '' + thousands_sep + '');

        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 无关的新函数，但也无法正常工作，输入值 =“-”根本无法工作

Answer 1

将输入类型从 text 更改为 number，之后您可以跳过所有值正则表达式检查。之后减号也会正常工作，代码会更清晰。
如果您需要更改语言环境，请传递 lang 属性 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>

Answer 2

你可以试试这个:

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

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

Javascript input keyup first value = "-" not NaN

html

javascript

jquery

input