javascript 实时更新表单上的值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6441354/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Real time updating of values on a form
提问by zik
Slightly related to my other question (which was answered) here, I was wondering if the following was possible (it likely is and very basic but I'm a bit noobish at JavaScript)!
与我的其他问题（已在此处回答）略有相关，我想知道以下是否可行（这可能是非常基本的，但我对 JavaScript 有点菜鸟）！
So I have 2 input fields where the user types something into a form. They press "calculate" and then the function totals up what they have entered and then calculates 1,2 and 3% for each value respectively. It looks something like this:
所以我有 2 个输入字段，用户可以在其中输入一些内容到表单中。他们按“计算”，然后该函数将他们输入的内容相加，然后分别计算每个值的 1.2% 和 3%。它看起来像这样：
input 1%valueinput 2%valueinput 3%valuetotal total
input 1%valueinput 2%valueinput 3%valuetotal total
Is there a way for me to be able to update the form in real time? So by this I mean, as soon as the user enters a value into a field the function automatically starts updating the values such as total etc? How would I go about achieving this, can it be done purely in JavaScript?
有没有办法让我能够实时更新表单？所以我的意思是，只要用户在字段中输入一个值，该函数就会自动开始更新诸如总计等值？我将如何实现这一点，是否可以完全用 JavaScript 完成？
Thanks
谢谢
采纳答案by JMax
If you want to display 'realtime' (meaningly, as the user types) values, you can use the keyup values :
如果要显示“实时”（即用户键入时）值，可以使用 keyup 值：
- http://www.w3schools.com/jsref/event_onkeyup.asp(for pure javascript)
- http://api.jquery.com/keyup/(for jquery)
- http://www.w3schools.com/jsref/event_onkeyup.asp（纯javascript）
- http://api.jquery.com/keyup/（对于 jquery）
回答by Fosco
Place an event handler on the onBlurevent. If you had a Javascript function called calculateStuff(), your input element could reference it like this:
在事件上放置一个事件处理程序onBlur。如果您有一个名为 的 Javascript 函数calculateStuff()，您的输入元素可以像这样引用它：
<input name="something" type="text" onblur="calculateStuff();" value="">
The onBlurevent happens when the user leavesthe field. If you want it to happen as they are still typing, you could use the onChangehandler in the same way.
该onBlur事件在用户离开该字段时发生。如果您希望它在他们仍在打字时发生，您可以onChange以相同的方式使用处理程序。
回答by Maurycy
Yes. You should call an onkeyup / onchange event in JavaScript to determine if the user has typed anything and inside the event just have it call a JavaScript function which refreshes the form by doing the math and inserting the values.
是的。您应该在 JavaScript 中调用 onkeyup / onchange 事件来确定用户是否输入了任何内容，并在事件中调用一个 JavaScript 函数，该函数通过计算和插入值来刷新表单。
You can also add other event listeners such as blur etc.
您还可以添加其他事件侦听器，例如模糊等。
It has been a while so i cant post any usable code but Google is your friend here.
已经有一段时间了，所以我不能发布任何可用的代码，但谷歌是你的朋友。
回答by rashedcs
Use onchangeevent handler. Simplex code are given below :
使用 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>
回答by GeertvdC
Without building a complete answer for you here are some hints:
如果没有为您建立完整的答案，这里有一些提示：
pure javascript would require something like this using the .valuefrom an element:
纯 javascript 将需要使用.valuefrom 元素的类似内容：
alert(document.getElementById('elementid').value);
if you use a javascript library as for example jquery you can use something as .val()
如果您使用 javascript 库，例如 jquery，您可以使用.val()
edit: you can use the onchangeevent to process the changes
编辑：您可以使用onchange事件来处理更改
回答by Oliver Ni
It's simple! Instead of using the button, add an onChange="your_calculate_function()"attribute to each of your inputs.
这很简单！不要使用按钮，而是onChange="your_calculate_function()"为每个输入添加一个属性。
