实时更新表单上的值答案

【问题标题】：Real time updating of values on a form实时更新表单上的值
【发布时间】：2011-09-20 10:41:53
【问题描述】：

与我的另一个问题（已回答）here 略有相关，我想知道以下是否可能（它可能是非常基本的，但我对 JavaScript 有点不熟悉）！

所以我有 2 个输入字段，用户可以在其中输入一些内容到表单中。他们按下“计算”，然后该函数将他们输入的内容相加，然后分别为每个值计算 1,2 和 3%。它看起来像这样：

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

有没有办法让我能够实时更新表单？所以我的意思是，一旦用户在字段中输入一个值，该函数就会自动开始更新值，例如总计等？我将如何实现这一点，可以纯粹在 JavaScript 中完成吗？

谢谢

【问题讨论】：

为每个触发计算的字段添加一个onblur事件监听器。
感谢大家的所有回答，我会稍微考虑一下，但这里的所有答案都很好。谢谢
AngularJS (angularjs.org) 在数据绑定和处理许多其他任务方面非常有用，非常简单有效，你应该看看它。 docs.angularjs.org/guide/databinding

标签： javascript html css forms

【解决方案1】：

如果您想显示“实时”（即用户键入）值，您可以使用 keyup 值：

http://www.w3schools.com/jsref/event_onkeyup.asp （对于纯 JavaScript）
http://api.jquery.com/keyup/（对于 jQuery）

【讨论】：

感谢您，因为这正是我一直在寻找并实施的。现在我只需要处理 isNaN 函数来阻止它返回 NaN！
实际上已排序，我只需要使用“0”预先填充值。当你知道怎么做时很容易！ ://

【解决方案2】：

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

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

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

【讨论】：

太棒了，我会试一试。谢谢你们的回答。
那不是实时的，那是在他们专注于其他事情之后，应该是onfocus="calculateStuff();"，无论如何，应该避免使用内联 JavaScript。

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

如果没有为您提供完整的答案，这里有一些提示：

纯 javascript 需要使用来自元素的 .value 类似的东西：

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

如果你使用 javascript 库，例如 jquery，你可以使用 .val()

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

【讨论】：

javascript as jquery??那是什么意思？ jQuery 是一个使用 javascript 的库
那是我的错字。意思是“作为 jquery 的 javascript 库”。现在更新了

【解决方案5】：

使用 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】：

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

【讨论】：