如何用jQuery基于输入值实时计算span值并处理数字格式化

问题根源 #

1. 带逗号的字符串无法正确参与计算：$("#num1").html()获取到的是带逗号的字符串（比如1,000），直接做减法时JS会错误解析这个值，导致计算结果异常。
2. 计算依赖实时显示值而非初始值：每次计算都用span当前的显示值来减输入值，会导致后续计算基于上一次的结果，而非原始的初始数值（比如输入20后span变成980，退格成2时，会用980-2=978，而不是1000-2=998）。
3. 多余的按键判断：退格/删除键的判断完全没必要，keyup事件会覆盖所有输入操作，只要实时处理输入值即可。

修正后的代码 #

HTML（修正拼写错误）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="num1">1,000</span> <!-- 1,000 来自表格 -->
<input type="text" name="num2" placeholder="Num2" class="form-control number" id="num2" autofocus>

JavaScript

// 保存初始数值（去掉逗号转成数字）
const initialNum = parseInt($("#num1").text().replace(/,/g, ''), 10);

$("#num2").keyup(function() {
    // 获取输入值，转成数字（空值则为0）
    const inputValue = parseInt($(this).val() || 0, 10);
    // 计算差值
    const result = initialNum - inputValue;
    // 格式化结果为带逗号的字符串
    const formattedResult = result.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    // 更新span内容
    $("#num1").html(formattedResult);
});

说明 #

• 先把初始的带逗号字符串转成纯数字保存，后续所有计算都基于这个初始值，避免累积错误。
• 输入值为空时默认按0处理，避免NaN问题。
• 使用正则表达式给数字添加千分位逗号，保证显示格式符合要求。
• 去掉了多余的按键判断，所有输入操作（包括退格、删除）都会实时触发计算。

内容的提问来源于stack exchange，提问作者Kyaw Wint Thu