实时更新表单上的值
Posted
技术标签:
【中文标题】实时更新表单上的值【英文标题】：Real time updating of values on a form 【发布时间】：2011-09-20 10:41:53 【问题描述】：与我的另一个问题（已回答）here 略有相关，我想知道以下是否可能（它可能是非常基本的，但我对 javascript 有点不熟悉）！
所以我有 2 个输入字段，用户可以在其中输入一些内容到表单中。他们按下“计算”，然后该函数将他们输入的内容相加，然后分别为每个值计算 1,2 和 3%。它看起来像这样：
input 1%valueinput 2%valueinput 3%valuetotal total
有没有办法让我能够实时更新表单？所以我的意思是，一旦用户在字段中输入一个值，该函数就会自动开始更新值，例如总计等？我将如何实现这一点，可以纯粹在 JavaScript 中完成吗？
谢谢
【问题讨论】：
为每个触发计算的字段添加一个onblur事件监听器。
感谢大家的所有回答，我会稍微考虑一下，但这里的所有答案都很好。谢谢
AngularJS (angularjs.org) 在数据绑定和处理许多其他任务方面非常有用，非常简单有效，你应该看看它。 docs.angularjs.org/guide/databinding
【参考方案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()" 属性。
【讨论】：
以上是关于实时更新表单上的值的主要内容，如果未能解决你的问题，请参考以下文章
无法使用 Spring Boot 和 Thymeleaf 以动态创建的形式获取更新的值