javascript/HTML实现多个text控件自动/动态计算总数

最新推荐文章于 2024-08-13 11:00:06 发布

原创最新推荐文章于 2024-08-13 11:00:06 发布 · 3.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#input #function #javascript #table #html

js/html/css技巧专栏收录该内容

20 篇文章

订阅专栏

这篇博客展示了如何使用JavaScript和HTML创建一个简单的表单，动态计算多个text输入框（text1, text2, text3）的数值总和。通过onkeyup事件和自定义函数autocalc，当用户在输入框中输入数字时，会实时更新total输入框的值。同时，EnsureDecimal函数用于限制输入只能为数字，防止输入非数字字符。" 122025139,5786159,Android Studio约束布局详解,"['Android开发', 'Android Studio', '布局设计', '约束布局', 'UI设计']

部署运行你感兴趣的模型镜像

<html>
<head>
<title>untitled</title>
<style type="text/css">

input {width: 40px;}

</style>
<script type="text/javascript" language="javascript">

function autocalc(e)
{
var field, val,total=0,i=0;
for (i; i< arguments.length; ++i) //loop through text elements
{
field = arguments[i];
val = parseFloat(field.value); //get value
if (!isNaN(val)) //number?
{
total += val; //accumulate
}

}
e.form.total.value = total; //out
}

function EnsureDecimal(e)
{
      if (((event.keyCode < 48) || (event.keyCode > 57)) && (event.keyCode != 46))
      {
         event.returnValue = false;
      }
      else if((e.value.indexOf('.')!=-1) && event.keyCode==46)
      {
        event.returnValue = false;
      }

}

</script>
</head>
<body onload="document.forms[0].reset()">
<form>
<table cellspacing="8">
<tr>
<td>value 1:<input name="text1" type="text" OnKeyPress="EnsureDecimal(this)" onkeyup="return autocalc(this,text2,text3)" tabindex="1"></td>
<td rowspan="3"><strong>total:</strong><input name="total" type="text" readonly="readonly" value="0" tabindex="-1"></td>
</tr><tr>
<td>value 2:<input name="text2" type="text" OnKeyPress="EnsureDecimal(this)" onkeyup="return autocalc(this,text1,text3)" tabindex="2"></td>
</tr><tr>
<td>value 3:<input name="text3" type="text" OnKeyPress="EnsureDecimal(this)" onkeyup="return autocalc(this,text1,text2)" tabindex="3"></td>
</tr>
</table>
</form>
</body>
</html>