jQuery实现onKeyup事件多输入框取值并计算百分比显示

我来帮你搞定这个实时计算需求！根据你的描述，我们需要让两个输入框的输入都能触发计算，把价格的对应百分比结果显示到指定span里。下面是具体的实现步骤：

1. 搭建清晰的HTML结构 #

先确保输入框和结果显示区域的DOM结构明确，给每个元素加上便于获取的ID或类名：

<!-- 价格输入框 -->
<input type="number" id="price-input" placeholder="请输入价格" onkeyup="calculateResult()">
<!-- 百分比数值输入框（对应你的#insp-period） -->
<input type="number" id="insp-period" placeholder="请输入百分比数值（如10）" onkeyup="calculateResult()">
<!-- 结果显示的span -->
<span class="result-output">0.00</span>

2. 编写核心计算逻辑 #

接下来写JavaScript函数，同时获取两个输入框的值，处理异常输入，并实时更新结果：

function calculateResult() {
  // 获取输入值并转换为数字，空输入时默认0避免出现NaN
  const price = parseFloat(document.getElementById('price-input').value) || 0;
  const period = parseFloat(document.getElementById('insp-period').value) || 0;
  
  // 计算价格的period%（比如输入10就是10%，对应你例子里的50000*10%=5000）
  const result = price * (period / 100);
  
  // 把结果渲染到span，保留两位小数更符合价格展示习惯
  document.querySelector('.result-output').textContent = result.toFixed(2);
}

关键细节说明 #

• 实时响应输入：给两个输入框都绑定了onkeyup事件，不管用户修改价格还是百分比数值，都会立刻触发计算更新结果；
• 兼容异常输入：用parseFloat转换输入值，搭配|| 0处理空输入或非数字输入的情况，避免页面出现NaN的错误显示；
• 规范结果格式：通过toFixed(2)把结果保留两位小数，让价格显示更专业。

如果你的需求是固定计算价格的10%（不管#insp-period输入什么），只需要把计算逻辑改成const result = price * 0.1;就可以啦！

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