实时更新Javascript计算器答案
[英]Real time updating of Javascript Calculator answer
问题描述
Is there a way to get a javascript calculator to calculate an answer as a user types instead of having to press a "calculate" button like in this example? 
有没有一种方法可以使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>
Using onblur is an improvement but you still have to click out of the text box to blur the input to get the answer. 使用onblur是一种改进，但是您仍然必须单击文本框之外的内容以模糊输入以获得答案。 Like I say, I'd prefer the answer to update in real time. 就像我说的那样，我希望答案能够实时更新。 Any suggestions? 有什么建议么？ Thanks! 谢谢！
5 个解决方案
解决方案1
1 2011-11-17 03:55:22
Use onkeyup . 使用onkeyup 。
eg 例如
<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 . jsFiddle示例 。
EDIT: Changed to onkeyup after finding onkeypress didn't work for me in Chrome. 编辑：发现onkeypress在Chrome中对我不起作用后更改为onkeyup 。
解决方案2
1 已采纳 2011-11-17 03:56:21
If the user is typing, you can use the keyup event. 如果用户正在键入，则可以使用keyup事件。 So basically, everytime the user types a key, your event handler fires and can update the view/display. 因此，基本上，每次用户键入键时，事件处理程序都会触发并可以更新视图/显示。
解决方案3
1 2011-11-17 04:02:38
HTML 的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 Java脚本
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/ http://jsfiddle.net/dbrecht/94hxS/
解决方案4
0 2013-11-21 00:10:15
Here is a simple example of two user text inputs, which "instantly" calculate the answer based on the called JavaScript function (The functions are also included). 这是两个用户文本输入的简单示例，它们基于调用的JavaScript函数（还包括这些函数）“立即”计算答案。 In addition, this code provides the option to also use a button (it is currently commented out). 此外，此代码还提供了还使用按钮的选项（当前已被注释掉）。 Hope this helps! 希望这可以帮助！
HTML: 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: 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;
}
解决方案5
0 2011-11-17 03:55:33
You could handle the onChange event in each of the input text boxes, calling your calculate function: 您可以在每个输入文本框中处理onChange事件，调用您的calculate函数：
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.