Question

有没有办法让javascript计算器在用户输入时计算答案，而不必像本例中那样按“计算”按钮？

<form  name="form" id="form">
<input type="Text" name="weight" size="4"> Weight (in Kilos)  
<input type="Text" name="height" size="4"> Height (in Centimeters)<br>
<input type="Text" name="BodyMassIndex" id="BodyMassIndex" size="4"> BMI     
<input type="button" style="font-size: 8pt" value="Calculate" onClick="calculateBMI()" name="button">
</form>

使用onblur是一项改进，但您仍需要单击文本框以模糊输入以获得答案。就像我说的，我更喜欢答案实时更新。有什么建议？谢谢！

Answer 1

使用onkeyup。

e.g。

<form  name="form" id="form">
<input type="Text" name="weight" size="4" onkeyup="calculateBMI()"> Weight (in Kilos)  
<input type="Text" name="height" size="4" onkeyup="calculateBMI()"> Height (in Centimeters)<br>
<input type="Text" name="BodyMassIndex" id="BodyMassIndex" size="4"> BMI     
<input type="button" style="font-size: 8pt" value="Calculate" onClick="calculateBMI()" name="button">
</form>

jsFiddle example

编辑：在onkeyup找到onkeypress后，我已更改为{{1}}。

Answer 2

如果用户正在输入，您可以使用keyup事件。所以基本上，每次用户键入一个键时，你的事件处理程序就会触发并可以更新视图/显示。

Answer 3

<强> HTML

<form  name="form" id="form">
    <input class="bmi_input" type="Text" name="weight" size="4"/> Weight (in Kilos)  
    <input class="bmi_input" type="Text" name="height" size="4"/> Height (in Centimeters)
    <input class="bmi_input" type="Text" name="BodyMassIndex" id="BodyMassIndex" size="4"/> BMI
</form>

<强>的Javascript

function calculateBMI() {
    console.log("I'm here");
}

var els = document.getElementsByClassName("bmi_input");
var sz = els.length;

for(var n = 0; n < sz; ++n) {
    els[n].onkeyup = calculateBMI;
}

http://jsfiddle.net/dbrecht/94hxS/

Answer 4

您可以在每个输入文本框中处理onChange事件，调用您的计算函数：

<form  name="form" id="form">
  <input type="Text" name="weight" size="4" onChange="calculateBMI()"> Weight (in Kilos)  
  <input type="Text" name="height" size="4" onChange="calculateBMI()"> Height (in Centimeters)<br>
  <input type="Text" name="BodyMassIndex" id="BodyMassIndex" size="4"> BMI     
</form>

Answer 5

以下是两个用户文本输入的简单示例，它根据调用的JavaScript函数“立即”计算答案（还包括函数）。此外，此代码还提供了使用按钮的选项（目前已注释掉）。希望这有帮助！

<强> HTML：

<body>
  <div id="form-main">
    <div id="form-div">
      <form class="form" id="form1" method="post">

  <p class="celcius"><h2 style="color:#FFF">Input:</h2>
    <input name="celsius" type="text" class="feedback-input" placeholder="Temperature (Celsius)" onkeyup="Conversion()" id="celsius" />
  </p>

  <hr>
  <h2 style="color:#FFF">Result:</h2>

  <p class="fahrenheit">
    <input name="fahrenheit" type="text" class="feedback-input" id="fahrenheit" onkeyup="Conversion2()" placeholder="Temperature (Fahrenheit)" />
  </p>      

  <!--
  <div class="submit">
    <input type="button" value="CONVERT" id="button-blue" onClick="Conversion()"/>
    <div class="ease"></div>
  </div>
  -->
</form>
</div>
</body>

<强> JavaScript的：

function Conversion() {
    var tempCels = parseFloat(document.getElementById('celsius').value);
    tempFarh =(tempCels)*(1.8)+(32);
    document.getElementById('fahrenheit').value= tempFarh;
 }

function Conversion2() {
    var tempFarh = parseFloat(document.getElementById('fahrenheit').value);
    tempCels =(tempFarh - 32)/(1.8);
    document.getElementById('celsius').value= tempCels;
 }

实时更新Javascript计算器答案

5 个答案: