如何用jQuery实时将金额输入框值增加10%并显示至含佣金输入框

可以通过HTML结合JavaScript轻松实现这个需求，核心是监听金额输入框的输入事件，实时计算并更新结果框的值。以下是具体实现代码：

HTML结构 #

先搭建两个输入框，分别用于输入金额和展示带佣金的结果（结果框设为只读避免手动修改）：

<div>
  <label>金额：</label>
  <input type="number" id="originalAmount" step="0.01" placeholder="请输入金额">
</div>
<div>
  <label>金额+佣金：</label>
  <input type="number" id="amountWithCommission" step="0.01" readonly placeholder="自动计算结果">
</div>

• type="number"确保输入为数字类型，step="0.01"支持小数输入（适配货币场景）
• readonly属性让结果框无法手动编辑，保证数据准确性

JavaScript逻辑 #

监听金额输入框的input事件，实时计算并更新结果：

// 获取输入框元素
const originalInput = document.getElementById('originalAmount');
const resultInput = document.getElementById('amountWithCommission');

// 添加输入事件监听
originalInput.addEventListener('input', function() {
  // 获取输入值，转换为数字
  const originalValue = parseFloat(this.value);
  
  // 处理无效输入（空值或非数字）
  if (isNaN(originalValue)) {
    resultInput.value = '';
    return;
  }
  
  // 计算加10%佣金后的金额（保留两位小数）
  const commissionAmount = originalValue * 1.1;
  resultInput.value = commissionAmount.toFixed(2);
});

• input事件会在输入框内容变化时立即触发，实现"实时"效果
• parseFloat转换输入值为数字，isNaN判断是否为有效数字
• toFixed(2)确保结果保留两位小数，符合货币展示习惯

额外优化点 #

• 如果需要支持整数输入，可去掉step="0.01"
• 若要限制输入范围，可给金额输入框添加min属性（如min="0"避免负数）

内容的提问来源于stack exchange，提问作者tartari