Question

与我的另一个问题（已回答）here略有关联，我想知道以下是否可能（这可能是非常基本但我在JavaScript中有点愚蠢）！

所以我有2个输入字段，用户在表单中键入内容。他们按“计算”，然后函数总计他们输入的内容，然后分别计算每个值的1,2和3％。它看起来像这样：

input 1%value
input 2%value
input 3%value
total total

我有办法实时更新表单吗？所以我的意思是，一旦用户在一个字段中输入一个值，该函数会自动开始更新诸如total等值？我将如何实现这一目标，是否可以完全用JavaScript完成？

由于

Answer 1

在onBlur事件上放置一个事件处理程序。如果你有一个名为calculateStuff()的Javascript函数，你的输入元素可以像这样引用它：

<input name="something" type="text" onblur="calculateStuff();" value="">

当用户离开字段时，会发生onBlur事件。如果您希望它仍然在键入时发生，您可以以相同的方式使用onChange处理程序。

Answer 2

是。您应该在JavaScript中调用onkeyup / onchange事件来确定用户是否输入了任何内容，并在事件内部调用JavaScript函数，该函数通过进行数学运算并插入值来刷新表单。

您还可以添加其他事件侦听器，例如模糊等。

已经有一段时间了，所以我无法发布任何可用的代码，但谷歌是你的朋友。

Answer 3

如果没有为您提供完整的答案，请参阅以下内容：

纯JavaScript需要使用元素中的.value：

alert(document.getElementById('elementid').value);

如果您使用javascript库作为例如jquery，您可以使用.val()

编辑：您可以使用onchange事件来处理更改

Answer 4

如果要显示“实时”（意思是，用户输入）值，您可以使用键盘值：

http://www.w3schools.com/jsref/event_onkeyup.asp （对于纯粹的javascript）
http://api.jquery.com/keyup/（for jquery的）

此致

最高

Answer 5

很简单！不是使用按钮，而是为每个输入添加onChange="your_calculate_function()"属性。

Answer 6

使用 onchange 事件处理程序。单纯形代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
function summation()
{
    var input1 = document.getElementById('input1').value;
    var input2 = document.getElementById('input2').value;
    var input3 = document.getElementById('input3').value;
    var total = (input1*1) + (input2*1) +(input3*1);
    document.getElementById('total').innerHTML = "Total = $"+total;
}
</script> 
</head>
<body>
<p>Input 1 : <input id="input1" type="number"  onchange="summation()"></p>
<p>Input 2 : <input id="input2" type="number"  onchange="summation()"></p>
<p>Input 3 : <input id="input3" type="number"  onchange="summation()"></p>
<p id="total"></p>
</body>

实时更新表单上的值

6 个答案: