Question

给出两个文本框。（TextBox1＆amp; TextBox2），我想添加两个数字（使用两个文本框）并在thrid文本框（TextBox3）中立即显示结果，即不按下asp.net按钮。这是使用Javascript完成的。我是javascript的新手，所以没什么好主意的。

这是asp.net页面。

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

        Box1
        <br />
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <br />
        <br />
        Box2<br />
        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
        <br />
        <br />
        Box3<br />
        <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>

    </div>
    </form>
</body>
</html>

Answer 1

首先，你必须在DOM中找到你的文本框，然后为这些元素分配事件处理程序，最后你需要编写将添加你的数字的函数。这是一个小例子：

<script language="JavaScript" type="text/javascript">
 // finding elements. you have to use ASP.NET ClientID property due to ASP generates its own ids.
 var tb1 = document.getElementById('<%= TextBox1.ClientID %>');
 var tb2 = document.getElementById('<%= TextBox2.ClientID %>');
 var tb3 = document.getElementById('<%= TextBox3.ClientID %>');
 // assigning event handlers
tb1.onchange=calcNumbers;
tb2.onchange=calcNumbers;
 // sum function
function calcNumbers() {    
tb3.value = parseInt(tb1.value) + parseInt(tb2.value);
}
</script>

Answer 2

我想你可以为每个单元格的onBlur事件附加一个函数来执行它。

Answer 3

试试这个（它都是基于js'onkeyup'事件处理程序）：

[编辑2] - 将事件处理程序再次更改为onkeyup。你需要在总和中做一点检查（0函数，文本框值是一个数字（isNan）。

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>
</head>
<body>
    First Number :<input id="txtFirstNumber" type="text" onkeyup="sum();" /><br />
    Second Number:<input id="txtSecondNumber" type="text" onkeyup="sum();" /><br />
    Third Number:<input id="txtThirdNumber" type="text" /><br />
    <input id="changeWatcher" type="text" />
</body>

<script type="text/javascript">

    function sum() {
        var txtFirstNumberValue = document.getElementById('txtFirstNumber').value;
        var txtSecondNumberValue = document.getElementById('txtSecondNumber').value;
        var result = parseInt(txtFirstNumberValue) + parseInt(txtSecondNumberValue);
        if(!isNaN(result))
        {
            document.getElementById('txtThirdNumber').value = result;
            //alert(parseInt(txtFirstNumberValue) + parseInt(txtSecondNumberValue));
        document.getElementById('changeWatcher').value = new Date();
        }
    }

</script>

</html>

Answer 4

我很惊讶其他人使用onBlur事件处理程序。对于这个问题，我建议使用onChange事件处理程序。当javascript成为问题时，我可能会被称为新手，我愿意听听为什么onBlur在这里得到了优先权。

Answer 5

使用jQuery函数的另一种解决方案是在您通过鼠标单击或向前跳转移出Textbox2之后发生的，它应该将结果放在Textbox3中。

$('#Textbox2').blur(
    function () {
        var t1value = $('#Textbox1').val();
    var t2value = &('#Textbox2').val();
    var sum = t1value + t2value;    
    $('#Textbox3').val(sum);
        });

使用Javascript在asp.net页面中添加两个数字

5 个答案: