JS input框keyup事件输入首字符为“-”避免出现NaN的实现问题

云上老周

2026-9-27

解决方案

核心问题原因

你的代码无法支持负号开头主要有2个核心问题：

原有字符过滤正则直接把-符号当成非法字符清除，输入后立刻被删掉
输入仅为-时直接转数字会得到NaN或0，无法保留输入状态等待后续输入数字

可用修改后代码

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

$(document).on("keyup change", ".cll_debit", function() {
    var sum = 0;
    $(".cll_debit").each(function(){
        const val = $(this).val().replace(/\./g, "");
        // 仅输入负号时按0计算不影响求和
        sum += val === '-' ? 0 : +val;
    });
    $("#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();
    // 保留开头的负号，只清除其他非法字符
    input = input.replace(/[^-\d]/g, '');
    // 仅保留第一个负号，防止多处输入负号
    if (input.includes('-')) {
        input = '-' + input.replace(/-/g, '');
    }
    // 单独输入负号时直接保留，不转数字
    if (input === '-') {
        $this.val(input);
        return;
    }
    input = input ? parseInt(input, 10) : 0;
    $this.val( function() {
        return ( input === 0 ) ? "" : input.toLocaleString("id-ID");
    } );
} );