Javascript 从html5 asp.net中的另一个文本框设置文本框的值

我的mvc4 asp.net视图中有3个文本框

代码是：-

<table>
<tr><td>A:</td><td>@Html.TextBox("A")</td></tr>
<tr><td>B:</td><td>@Html.TextBox("B")</td></tr>
<tr><td>Answer:</td><td>@Html.TextBox("C")</td></tr>
</table>

A:@Html.TextBox（“A”）
B:@Html.TextBox（“B”）
回答：@Html.TextBox（“C”）

比如说，我想要的是

当我在文本框A中输入“3”和在文本框B中输入“2”时，答案“5”将立即显示在文本框C中，而我不会点击任何提交按钮

我该怎么做

---

谢谢。

您需要使用某种形式的Javascript来实现这一点。下面是一段普通JavaScript，它在a和B上都添加了一个事件处理程序，比较文本框的值，如果满足条件，则在C中显示所需的值：

// Get all the textboxes by their IDs
var textboxA = document.getElementById("A");
var textboxB = document.getElementById("B");
var textboxC = document.getElementById("C");
// Add a handler for the keyup event
textboxA.addEventListener("keyup", showAnswer, false);
textboxB.addEventListener("keyup", showAnswer, false);

function showAnswer() {
    // Convert the values from a string to a float
    var valA = parseFloat(textboxA.value);
    var valB = parseFloat(textboxB.value);
    // Make sure both values are valid numbers
    if(!isNaN(valA) && !isNaN(valB)) {
        // Show the calculated value in the C box
        textboxC.value = valA + valB;
    }
    else {
        // Can't do any calculations, just show a blank value
        textboxC.value = "";
    }
}

下面是一个示例

使用jQuery有更简单的方法：

$(function() {
    $("#A, #B").on("keyup blur", function() {
        var valA = parseFloat($("#A").val());
        var valB = parseFloat($("#B").val());
        if(!isNaN(valA) && !isNan(valB)) {
            $("#C").val(valA + valB);
        }
        else {
            $("#C").val("");
        }
    });
});

---

这里是另一个使用JQuery的解决方案

要使用JQuery，您需要在head标记中添加JQuery库，只需在head标记中复制粘贴下面的行

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

JQuery：

<script type="text/javascript" >

$(document).ready(function (){

    $("#Txt_1").on('input', function () {
        sumCal();
    });

    $("#Txt_2").on('input', function () {
        sumCal();
    });

    function sumCal() {

        var txt1 = $("#Txt_1").val();
        var txt2 = $("#Txt_2").val();
        var result = Number(txt1) + Number(txt2);
        $("#Txt_3").val(result);
    }
});
</script>

$（文档）.ready（函数（）{
$（“#Txt_1”）。on（'input'，function（）{
sumCal（）；
});
$（“#Txt_2”）。on（'input'，function（）{
sumCal（）；
});
函数sumCal（）{
var txt1=$（“#Txt_1”）.val（）；
var txt2=$（“#Txt_2”）.val（）；
var结果=数量（txt1）+数量（txt2）；
$（“#Txt_3”）.val（结果）；
}
});

试试这个

$(document).ready(function(){

  $("#txtbox2").keyup(function(){
    var txt01= parseInt ($("#txtbox1").val(),10);

 var txt02= parseInt( $("#txtbox2").val(),10);

$("#txtbox3").val( txt01+txt02);

  });
});

---

放置div并完成您的任务……我刚才给出的只是一个示例，值并不总是3和2。它一直在变化。。。我对javascript还不熟悉，所以我仍然不知道如何使用它。更新了基本计算器库的答案，您的代码按预期工作。但是我以前从未使用过JQuery，所以我不知道如何与我的代码集成。你有什么建议吗？太好了！就像我想要的那样工作。。。谢谢你的帮助！：）