javascript 真实的更新表单上的值

sz81bmfz 于 2023-03-21 发布在 Java

关注(0)|答案(7)|浏览(131)

稍微与我的另一个问题有关（已经回答了）here，我想知道下面是否可能（很可能是非常基本的，但我对JavaScript有点菜鸟）！
因此，我有2个输入字段，用户在表单中键入内容。他们按下“计算”，然后函数总计他们输入的内容，然后分别计算每个值的1，2和3%。它看起来像这样：
input 1%value
input 2%value
input 3%value
total total
有没有一种方法可以让我真实的更新表单？所以我的意思是，只要用户在字段中输入一个值，函数就会自动开始更新值，如total等？我如何实现这一点，可以纯粹用JavaScript来完成吗？
谢谢

JavaScript

来源：https://stackoverflow.com/questions/6441354/real-time-updating-of-values-on-a-form

7条答案

按热度按时间

e5njpo681#

如果你想显示“realtime”（意思是当用户输入时）值，你可以使用keyup值：

http://www.w3schools.com/jsref/event_onkeyup.asp（用于纯javascript）
http://api.jquery.com/keyup/（用于jquery）

赞(0）回复(0）举报 2023-03-21

zzlelutf2#

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

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

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

赞(0）回复(0）举报 2023-03-21

xesrikrc3#

是的。你应该在JavaScript中调用一个onkeyup / onchange事件来确定用户是否输入了任何内容，然后在事件中调用一个JavaScript函数，通过计算和插入值来刷新表单。
您还可以添加其他事件侦听器，如blur等。
它已经有一段时间了，所以我不能张贴任何可用的代码，但谷歌是你的朋友在这里。

赞(0）回复(0）举报 2023-03-21

wgeznvg74#

在没有为您构建完整答案的情况下，这里有一些提示：
纯javascript需要这样的东西，从元素中使用.value：

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

如果您使用javascript库，例如jquery，则可以使用.val()
edit：您可以使用onchange事件来处理更改

赞(0）回复(0）举报 2023-03-21

ggazkfy85#

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

赞(0）回复(0）举报 2023-03-21

blmhpbnm6#

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

赞(0）回复(0）举报 2023-03-21

nsc4cvqm7#

至于我的知识你想用

oninput='your_cal_func()'

为什么选择oninput：就像oninput的意思是在打字时一样……试试这个，看看它对你有用吗？
为什么不是onfocus , onchange, onblur：Bcoz onfocus打印对它的关注...而onchange将打印对你进入或继续（即按回车键）也为onblur也打印当你对任何其他div的关注...
因此我更喜欢使用oninput如果你想要的代码回复我。
我喜欢用这种方式回复谢谢q

赞(0）回复(0）举报 2023-03-21

我来回答

javascript 真实的更新表单上的值

7条答案

相关问题

热门标签

最新问答